/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root, :host {
      --cd-mb-p: 0;
      --tl-p: 1;
      --ba-n: 50;
      --cd-wp: 0;
      --ring-spin: 0deg;
      --fan: 1;
    }

    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
      --cd-p: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-ink: var(--ink);
    --font-display: serif;
    --font-body: sans-serif;
  }
}

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

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

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

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

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

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

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

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

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components;

@layer utilities {
  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .m-41 {
    margin: calc(var(--spacing) * 41);
  }

  .block {
    display: block;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

  .resize {
    resize: both;
  }

  .underline {
    text-decoration-line: underline;
  }

  .accent-ink {
    accent-color: var(--color-ink);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

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

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
}

:root, [data-theme="editoriale"] {
  --bg: oklch(97% .005 85);
  --surface: oklch(99% .003 85);
  --ink: oklch(14% .003 280);
  --ink-soft: oklch(51% .005 280);
  --accent: oklch(41% .13 25);
  --accent-ink: oklch(97% .005 85);
  --border: oklch(88% .005 85);
  --success: oklch(52% .1 170);
  --success-soft: oklch(95.5% .035 170);
  --warning: oklch(53.5% .12 65);
  --warning-soft: oklch(95.5% .035 65);
  --danger: oklch(54.5% .18 18);
  --danger-soft: oklch(95.5% .035 18);
  --shadow-lift: 0 12px 24px #0000001f;
  --shadow-float: 0 1px 2px #0000000f, 0 16px 40px #00000024;
}

[data-theme="travertino"] {
  --bg: oklch(91% .015 70);
  --surface: oklch(96% .01 70);
  --ink: oklch(25% .005 280);
  --ink-soft: oklch(45% .01 280);
  --accent: oklch(60% .1 35);
  --accent-ink: oklch(20% .005 280);
  --border: oklch(83% .015 70);
  --success: oklch(48.5% .095 170);
  --success-soft: oklch(94.5% .035 170);
  --warning: oklch(50.5% .11 65);
  --warning-soft: oklch(94.5% .035 65);
  --danger: oklch(51.5% .17 27);
  --danger-soft: oklch(94.5% .035 27);
}

[data-theme="notturno"] {
  --bg: oklch(16% .015 250);
  --surface: oklch(21% .015 250);
  --ink: oklch(93% .025 80);
  --ink-soft: oklch(75% .02 80);
  --accent: oklch(56% .1 75);
  --accent-ink: oklch(12% .015 250);
  --border: oklch(32% .02 250);
  --success: oklch(64% .1 172);
  --success-soft: oklch(27% .05 172);
  --warning: oklch(65% .11 80);
  --warning-soft: oklch(27% .05 80);
  --danger: oklch(66% .13 25);
  --danger-soft: oklch(27% .05 25);
}

[data-theme="trattoria"] {
  --bg: oklch(94% .012 80);
  --surface: oklch(97% .008 80);
  --ink: oklch(32% .13 20);
  --ink-soft: oklch(45% .07 110);
  --accent: oklch(63% .13 45);
  --accent-ink: oklch(20% .06 20);
  --border: oklch(86% .02 80);
  --success: oklch(50.5% .1 168);
  --success-soft: oklch(95.5% .035 168);
  --warning: oklch(52.5% .115 65);
  --warning-soft: oklch(95.5% .035 65);
  --danger: oklch(54% .19 28);
  --danger-soft: oklch(95.5% .035 28);
}

[data-theme="botanico"] {
  --bg: oklch(93% .008 90);
  --surface: oklch(97% .005 90);
  --ink: oklch(35% .05 160);
  --ink-soft: oklch(50% .08 75);
  --accent: oklch(50% .08 75);
  --accent-ink: oklch(97% .005 90);
  --border: oklch(76% .04 80);
  --success: oklch(50% .095 172);
  --success-soft: oklch(95.5% .035 172);
  --warning: oklch(52% .115 65);
  --warning-soft: oklch(95.5% .035 65);
  --danger: oklch(53% .17 27);
  --danger-soft: oklch(95.5% .035 27);
}

[data-theme="servizio"] {
  --bg: oklch(99% .002 250);
  --surface: oklch(96% .005 250);
  --ink: oklch(40% .11 250);
  --ink-soft: oklch(51% .015 250);
  --accent: oklch(40% .11 250);
  --accent-ink: oklch(99% .002 250);
  --border: oklch(88% .01 250);
  --success: oklch(52% .1 170);
  --success-soft: oklch(95.5% .035 170);
  --warning: oklch(53.5% .12 65);
  --warning-soft: oklch(95.5% .035 65);
  --danger: oklch(54% .17 27);
  --danger-soft: oklch(95.5% .035 27);
}

[data-theme="crudo"] {
  --bg: oklch(96% .005 95);
  --surface: oklch(99% .003 95);
  --ink: oklch(15% .003 280);
  --ink-soft: oklch(45% .005 280);
  --accent: oklch(48% .22 265);
  --accent-ink: oklch(96% .005 95);
  --border: oklch(85% .005 95);
  --success: oklch(52% .1 170);
  --success-soft: oklch(95.5% .035 170);
  --warning: oklch(53.5% .12 65);
  --warning-soft: oklch(95.5% .035 65);
  --danger: oklch(54% .17 27);
  --danger-soft: oklch(95.5% .035 27);
}

[data-theme="espressiva"] {
  --bg: oklch(97.2% .016 85);
  --surface: oklch(99.2% .007 85);
  --ink: oklch(20% .045 290);
  --ink-soft: oklch(45% .035 290);
  --accent: oklch(65.5% .19 42);
  --accent-ink: oklch(20% .045 290);
  --border: oklch(87% .02 85);
  --success: oklch(52% .1 170);
  --success-soft: oklch(95.5% .035 170);
  --warning: oklch(53.5% .11 75);
  --warning-soft: oklch(95.5% .035 75);
  --danger: oklch(54% .17 27);
  --danger-soft: oklch(95.5% .035 27);
}

:root {
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --reveal-y: 14px;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring-soft: linear(0,.006,.025,.057,.1,.21,.37,.55,.72,.86,.95,1,1.02,1.01,1);
  --ease-spring-snappy: linear(0,.04,.16,.36,.62,.86,1.02,1.06,1.03,1,.99,1);
  --ease-spatial-fast: cubic-bezier(.42, 1.67, .21, .9);
  --ease-spatial: cubic-bezier(.38, 1.21, .22, 1);
  --ease-spatial-slow: cubic-bezier(.39, 1.29, .35, .98);
  --ease-spatial-standard: cubic-bezier(.27, 1.06, .18, 1);
  --ease-effects-fast: cubic-bezier(.31, .94, .34, 1);
  --ease-effects: cubic-bezier(.34, .8, .34, 1);
  --ease-effects-slow: cubic-bezier(.34, .88, .34, 1);
  --dur-fast: .15s;
  --dur-base: .32s;
  --dur-slow: .56s;
  --dur-page: .48s;
  --dur-cinematic: 1s;
  --dur-exit: .2s;
  --stagger: 60ms;
  --stagger-max: .5s;
  --dur-spatial-fast: .35s;
  --dur-spatial: .5s;
  --dur-spatial-slow: .65s;
  --dur-effects-fast: .15s;
  --dur-effects: .2s;
  --dur-effects-slow: .3s;
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
}

.display-2xl {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  font-size: 128px;
  font-weight: 400;
  line-height: .92;
}

.display-xl {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.05;
}

.display-l {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
}

.stat {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
}

.heading-l {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.111;
}

.heading-m {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.heading-s {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

.lead {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.556;
}

.body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.body-medium {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.small {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4286;
}

.kicker {
  font-family: var(--font-body);
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

:root {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-border: var(--border);
  --cd-vh: 100svh;
  --cd-vw: 100vw;
  --cd-gutter: clamp(24px, 5vw, 48px);
  --cd-btn-fill: var(--ink);
  --cd-btn-fill-ink: var(--bg);
  --cd-display-weight: 400;
  --duo-shadow: var(--ink);
  --duo-highlight: var(--accent);
  --duo-strength: .85;
  --scrim-from: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --scrim-from: color-mix(in oklab, var(--ink) 78%, transparent);
  }
}

:root {
  --scrim-to: transparent;
  --photo-ratio: 4 / 5;
  --photo-radius: var(--radius-lg);
}

[data-theme="editoriale"] {
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --cd-display-weight: 600;
}

[data-theme="travertino"] {
  --font-display: "Tenor Sans", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --cd-display-weight: 400;
}

[data-theme="notturno"] {
  --font-display: "EB Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --cd-display-weight: 400;
  color-scheme: dark;
}

[data-theme="trattoria"] {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Vollkorn", Georgia, serif;
  --cd-display-weight: 600;
}

[data-theme="botanico"] {
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --cd-display-weight: 300;
}

[data-theme="servizio"] {
  --font-display: "Public Sans", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --cd-display-weight: 600;
  --cd-btn-fill: var(--ink-soft);
}

[data-theme="crudo"] {
  --font-display: "Climate Crisis", Impact, sans-serif;
  --font-body: "JetBrains Mono", ui-monospace, monospace;
  --cd-display-weight: 400;
}

[data-theme="espressiva"] {
  --font-display: "Google Sans Flex", system-ui, sans-serif;
  --font-body: "Google Sans Flex", system-ui, sans-serif;
  --cd-display-weight: 640;
  --cd-rond: 100;
  --radius-lg: var(--radius-xl);
  font-variation-settings: "ROND" var(--cd-rond);
}

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

.cd-reset, .cd-reset * {
  transition: none !important;
}

.cd-ph {
  background: radial-gradient(circle at 50% 56%, var(--bg) 0 20%, var(--ink) 20.5% 21.5%, var(--surface) 22% 33%, transparent 33.5%), linear-gradient(160deg, var(--accent), var(--accent));
  display: block;
  position: relative;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ph {
    background: radial-gradient(circle at 50% 56%, color-mix(in oklab, var(--bg) 88%, var(--accent)) 0 20%, color-mix(in oklab, var(--ink) 55%, var(--bg)) 20.5% 21.5%, color-mix(in oklab, var(--surface) 92%, var(--accent)) 22% 33%, transparent 33.5%), linear-gradient(160deg, color-mix(in oklab, var(--accent) 75%, var(--ink)), color-mix(in oklab, var(--accent) 50%, var(--bg)));
  }
}

.cd-ph--b {
  background: radial-gradient(circle at 68% 34%, var(--accent) 0 11%, transparent 11.5%), linear-gradient(to bottom, var(--surface) 0 58%, var(--ink) 58% 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ph--b {
    background: radial-gradient(circle at 68% 34%, color-mix(in oklab, var(--accent) 85%, var(--bg)) 0 11%, transparent 11.5%), linear-gradient(to bottom, color-mix(in oklab, var(--surface) 70%, var(--accent)) 0 58%, color-mix(in oklab, var(--ink) 80%, var(--accent)) 58% 100%);
  }
}

.cd-ph--c {
  background: radial-gradient(38% 55% at 50% 100%, var(--bg) 0 99%, transparent 100%), radial-gradient(44% 62% at 50% 100%, var(--ink) 0 99%, transparent 100%), linear-gradient(to bottom, var(--border), var(--ink-soft));
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ph--c {
    background: radial-gradient(38% 55% at 50% 100%, color-mix(in oklab, var(--bg) 80%, var(--accent)) 0 99%, transparent 100%), radial-gradient(44% 62% at 50% 100%, color-mix(in oklab, var(--ink) 90%, var(--bg)) 0 99%, transparent 100%), linear-gradient(to bottom, color-mix(in oklab, var(--border) 70%, var(--accent)), color-mix(in oklab, var(--ink-soft) 70%, var(--bg)));
  }
}

.cd-ph--d {
  background: repeating-linear-gradient(115deg, transparent 0 34px, var(--ink) 34px 36px), linear-gradient(115deg, var(--ink) 0 42%, var(--accent) 42% 100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ph--d {
    background: repeating-linear-gradient(115deg, transparent 0 34px, color-mix(in oklab, var(--ink) 18%, transparent) 34px 36px), linear-gradient(115deg, color-mix(in oklab, var(--ink) 88%, var(--accent)) 0 42%, color-mix(in oklab, var(--accent) 90%, var(--bg)) 42% 100%);
  }
}

.cd-ph:after {
  content: "";
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
}

.cd-ph[data-label]:before {
  content: attr(data-label);
  z-index: 1;
  border-radius: var(--radius-full);
  background: var(--surface);
  padding: 6px 10px;
  position: absolute;
  bottom: 12px;
  left: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ph[data-label]:before {
    background: color-mix(in oklab, var(--surface) 88%, transparent);
  }
}

.cd-ph[data-label]:before {
  color: var(--ink);
  font: 500 12px/1 var(--font-body);
  letter-spacing: .02em;
}

[data-reveal] {
  transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out), clip-path var(--dur-cinematic) var(--ease-out-expo);
  transition-delay: min(calc(var(--i, 0) * var(--stagger)), var(--stagger-max, .5s));
}

[data-reveal="mask"] {
  clip-path: inset(0);
}

html.cd-js [data-reveal]:not(.in) {
  opacity: 0;
  translate: 0 var(--reveal-y);
}

html.cd-js [data-reveal="blur"]:not(.in) {
  filter: blur(12px);
}

html.cd-js [data-reveal="mask"]:not(.in) {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  translate: none;
}

[data-reveal-group] > * {
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
  transition-delay: min(calc(var(--i, 0) * var(--stagger)), var(--stagger-max, .5s));
}

html.cd-js [data-reveal-group]:not(.in) > * {
  opacity: 0;
  translate: 0 var(--reveal-y);
}

[data-reveal-group] > :nth-child(2) {
  --i: 1;
}

[data-reveal-group] > :nth-child(3) {
  --i: 2;
}

[data-reveal-group] > :nth-child(4) {
  --i: 3;
}

[data-reveal-group] > :nth-child(5) {
  --i: 4;
}

[data-reveal-group] > :nth-child(6) {
  --i: 5;
}

[data-reveal-group] > :nth-child(7) {
  --i: 6;
}

[data-reveal-group] > :nth-child(8) {
  --i: 7;
}

[data-reveal-group] > :nth-child(9) {
  --i: 8;
}

[data-reveal-group] > :nth-child(10) {
  --i: 9;
}

[data-reveal-group] > :nth-child(11) {
  --i: 10;
}

[data-reveal-group] > :nth-child(12) {
  --i: 11;
}

@supports (transition-delay: calc(sibling-index() * 1ms)) {
  [data-reveal-group] > :nth-child(n) {
    --i: calc(sibling-index() - 1);
  }
}

@supports (transition-delay: calc(sibling-count() * 1ms)) {
  [data-reveal-group] > * {
    transition-delay: calc(var(--i, 0) * min(var(--stagger), var(--stagger-max, .5s) / max(sibling-count() - 1, 1)));
  }
}

@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
  [data-parallax] {
    animation: linear both cd-parallax;
    animation-timeline: view();
    animation-range: cover;
  }

  [data-parallax="soft"] {
    animation-name: cd-parallax-soft;
  }

  @keyframes cd-parallax {
    from {
      translate: 0 -100px;
    }

    to {
      translate: 0 100px;
    }
  }

  @keyframes cd-parallax-soft {
    from {
      translate: 0 -48px;
    }

    to {
      translate: 0 48px;
    }
  }

  [data-scroll-scale] {
    animation: linear both cd-scroll-scale;
    animation-timeline: view();
    animation-range: entry entry 60%;
  }

  @keyframes cd-scroll-scale {
    from {
      scale: .86;
    }

    to {
      scale: 1;
    }
  }

  [data-scroll-type] {
    transform-origin: 0;
    animation: linear both cd-scroll-type;
    animation-timeline: view();
    animation-range: entry cover 50%;
  }

  @keyframes cd-scroll-type {
    from {
      color: var(--ink-soft);
      scale: .82;
    }

    to {
      color: var(--ink);
      scale: 1.18;
    }
  }

  [data-progress] {
    transform-origin: 0;
    animation: linear both cd-progress;
    animation-timeline: scroll(root);
  }

  @keyframes cd-progress {
    from {
      scale: 0 1;
    }

    to {
      scale: 1;
    }
  }
}

@supports not ((animation-timeline: view()) and (animation-range: 0% 100%)) {
  [data-progress] {
    display: none;
  }
}

.cd-press {
  transition: scale var(--dur-fast) var(--ease-spring-snappy);
}

.cd-press:active {
  scale: .97;
}

.cd-underline {
  text-decoration: none;
  position: relative;
}

.cd-underline:after {
  content: "";
  transform-origin: 100%;
  height: 1px;
  transition: scale var(--dur-base) var(--ease-out);
  background: currentColor;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  scale: 0 1;
}

@media (hover: hover) and (pointer: fine) {
  .cd-underline:hover:after {
    transform-origin: 0;
    scale: 1;
  }
}

.cd-underline:focus-visible:after {
  scale: 1;
}

.cd-lift {
  transition: translate var(--dur-base) var(--ease-spring-soft), filter var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cd-lift:hover {
    filter: drop-shadow(var(--shadow-lift));
    translate: 0 -6px;
  }
}

.cd-tilt {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-fast) var(--ease-out);
}

.cd-magnetic, [data-magnetic] {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate var(--dur-base) var(--ease-spring);
}

.cd-spotlight {
  isolation: isolate;
  position: relative;
}

.cd-spotlight:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), var(--accent), transparent 70%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-spotlight:before {
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cd-spotlight:hover:before {
    opacity: 1;
  }
}

.cd-exit {
  transition: opacity var(--dur-exit) var(--ease-out), translate var(--dur-exit) var(--ease-out), display var(--dur-exit) allow-discrete;
}

@starting-style {
  .cd-exit {
    opacity: 0;
    translate: 0 6px;
  }
}

.cd-exit[hidden] {
  opacity: 0;
  translate: 0 6px;
}

.cd-pop {
  transform-origin: var(--cd-origin, center);
  opacity: 0;
  transition: scale var(--dur-fast) var(--ease-spring-snappy), opacity var(--dur-fast) var(--ease-out);
  scale: .97;
}

.cd-pop--below {
  --cd-origin: top center;
}

.cd-pop--above {
  --cd-origin: bottom center;
}

.cd-pop--tl {
  --cd-origin: top left;
}

:is(.cd-pop.is-open, .cd-pop:popover-open) {
  opacity: 1;
  scale: 1;
}

.cd-marquee {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.cd-marquee__track {
  min-width: 100%;
  animation: cd-marquee var(--cd-marquee-dur, 22s) linear infinite;
  flex: none;
  gap: 2rem;
  padding-right: 2rem;
  display: flex;
}

.cd-marquee--reverse .cd-marquee__track {
  animation-direction: reverse;
}

.cd-marquee:hover .cd-marquee__track {
  animation-play-state: paused;
}

@keyframes cd-marquee {
  from {
    translate: 0;
  }

  to {
    translate: -100%;
  }
}

.cd-mesh {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.cd-mesh:before {
  content: "";
  z-index: -1;
  background: radial-gradient(40% 40% at 20% 30%, var(--accent), transparent), radial-gradient(35% 35% at 80% 20%, var(--accent), transparent), radial-gradient(45% 45% at 60% 80%, var(--ink), transparent);
  position: absolute;
  inset: -40%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-mesh:before {
    background: radial-gradient(40% 40% at 20% 30%, color-mix(in oklab, var(--accent) 55%, transparent), transparent), radial-gradient(35% 35% at 80% 20%, color-mix(in oklab, var(--accent) 35%, transparent), transparent), radial-gradient(45% 45% at 60% 80%, color-mix(in oklab, var(--ink) 25%, transparent), transparent);
  }
}

.cd-mesh:before {
  filter: blur(40px) saturate(1.1);
  animation: cd-mesh 18s var(--ease-out) infinite alternate;
}

@keyframes cd-mesh {
  from {
    rotate: 0deg;
    scale: 1.05;
  }

  to {
    rotate: 8deg;
    scale: 1.15;
  }
}

.cd-grain {
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: .6s steps(2, end) infinite cd-grain;
  position: fixed;
  inset: 0;
}

@keyframes cd-grain {
  0% {
    translate: 0;
  }

  50% {
    translate: -2% 1%;
  }

  100% {
    translate: 1% -1%;
  }
}

.cd-count {
  font-variant-numeric: tabular-nums;
}

.cd-cursor {
  z-index: 10000;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--accent);
  pointer-events: none;
  width: 28px;
  height: 28px;
  translate: calc(var(--cx, -100px) - 50%) calc(var(--cy, -100px) - 50%);
  transition: translate 80ms linear, scale var(--dur-base) var(--ease-out);
  mix-blend-mode: difference;
  position: fixed;
  top: 0;
  left: 0;
}

.cd-duotone {
  isolation: isolate;
  position: relative;
}

.cd-duotone > img, .cd-duotone > picture > img, .cd-duotone.is-img {
  filter: grayscale() contrast(1.05);
}

.cd-duotone:before, .cd-duotone:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.cd-duotone:before {
  z-index: 1;
  background: var(--duo-shadow);
  mix-blend-mode: multiply;
  opacity: var(--duo-strength);
}

.cd-duotone:after {
  z-index: 2;
  background: var(--duo-highlight);
  mix-blend-mode: screen;
  opacity: calc(var(--duo-strength) * .6);
}

.cd-scrim {
  isolation: isolate;
  position: relative;
}

.cd-scrim:after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--scrim-from), var(--scrim-to) 62%);
  position: absolute;
  inset: 0;
}

.cd-scrim > * {
  z-index: 2;
  position: relative;
}

.cd-scrim--left:after {
  background: linear-gradient(to right, var(--scrim-from), var(--scrim-to) 62%);
}

.cd-scrim--full:after {
  background: linear-gradient(to top, var(--scrim-from), var(--scrim-from));
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-scrim--full:after {
    background: linear-gradient(to top, var(--scrim-from), color-mix(in oklab, var(--scrim-from) 35%, transparent));
  }
}

.cd-photo-grain {
  isolation: isolate;
  position: relative;
}

.cd-photo-grain:after {
  content: "";
  z-index: 3;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
}

.cd-photo-frame {
  aspect-ratio: var(--photo-ratio);
  border-radius: var(--photo-radius);
  background: var(--surface);
  overflow: hidden;
}

.cd-photo-frame > img, .cd-photo-frame > picture, .cd-photo-frame > picture > img, .cd-photo-frame > .cd-ph {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-photo-frame--square {
  --photo-ratio: 1 / 1;
}

.cd-photo-frame--wide {
  --photo-ratio: 16 / 9;
}

.cd-photo-frame--tall {
  --photo-ratio: 3 / 4;
}

.cd-btn {
  isolation: isolate;
  border-radius: var(--radius-full);
  background: var(--accent);
  min-height: 48px;
  color: var(--accent-ink);
  font: 500 16px/1 var(--font-body);
  cursor: pointer;
  translate: var(--mx, 0px) var(--my, 0px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--dur-slow) var(--ease-out-expo), translate var(--dur-base) var(--ease-spring), scale var(--dur-fast) var(--ease-spring-snappy);
  border: 0;
  align-items: center;
  gap: .75em;
  padding: 0 1.5rem;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.cd-btn:before {
  content: "";
  z-index: -1;
  background: var(--cd-btn-fill);
  clip-path: circle(0% at var(--x, 50%) var(--y, 100%));
  transition: clip-path var(--dur-slow) var(--ease-out-expo);
  position: absolute;
  inset: 0;
}

.cd-btn:active {
  scale: .97;
}

.cd-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-btn__roll {
  line-height: 1.25;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.cd-btn__roll > span {
  transition: translate var(--dur-slow) var(--ease-out-expo);
  display: block;
}

.cd-btn__roll > span + span {
  position: absolute;
  inset: 0;
  translate: 0 110%;
}

.cd-btn__icon {
  transition: translate var(--dur-slow) var(--ease-out-expo);
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .cd-btn:hover {
    color: var(--cd-btn-fill-ink);
  }

  .cd-btn:hover:before {
    clip-path: circle(150% at var(--x, 50%) var(--y, 100%));
  }

  .cd-btn:hover .cd-btn__roll > span:first-child {
    translate: 0 -110%;
  }

  .cd-btn:hover .cd-btn__roll > span + span {
    translate: 0;
  }

  .cd-btn:hover .cd-btn__icon {
    translate: 4px;
  }
}

.cd-btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border);
  background: none;
}

.cd-link {
  min-height: 44px;
  color: var(--ink);
  font: 500 16px/1 var(--font-body);
  align-items: center;
  gap: .5em;
  display: inline-flex;
}

.cd-link__icon {
  transition: translate var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cd-link:hover .cd-link__icon {
    translate: 4px;
  }
}

.cd-split__w {
  vertical-align: top;
  margin-block: -.06em -.12em;
  padding-block: .06em .12em;
  display: inline-block;
  overflow: clip;
}

.cd-split__i {
  transition: translate var(--dur-cinematic) var(--ease-out-expo);
  transition-delay: calc(min(var(--i, 0) * 40ms, var(--stagger-max, .5s)) + var(--cd-split-delay, 0s));
  display: inline-block;
}

html.cd-js .cd-split:not(.in) .cd-split__i {
  translate: 0 115%;
}

html.cd-split-pending .cd-split[data-split="lines"] {
  opacity: 0;
}

.cd-fill {
  view-timeline: --cd-fill block;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-fill__w {
      animation: linear both cd-fill;
      animation-timeline: --cd-fill;
      animation-range: cover calc(20% + var(--i) / var(--n) * 36%) cover calc(20% + (var(--i) + 1) / var(--n) * 36%);
    }

    @keyframes cd-fill {
      from {
        opacity: .18;
      }

      to {
        opacity: 1;
      }
    }
  }
}

[data-scramble] {
  font-variant-numeric: tabular-nums;
}

.cd-scramble__x {
  color: var(--accent);
}

.cd-reveal-img {
  border-radius: var(--radius-lg);
  clip-path: inset(0 0 0 0 round var(--radius-lg));
  transition: clip-path var(--dur-cinematic) var(--ease-out-expo) var(--cd-delay, 0s);
  position: relative;
  overflow: hidden;
}

.cd-reveal-img > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: scale calc(var(--dur-cinematic) * 1.4) var(--ease-out-expo) var(--cd-delay, 0s);
  display: block;
  scale: 1;
}

html.cd-js .cd-reveal-img:not(.in) {
  clip-path: inset(100% 0 0 0 round var(--radius-lg));
}

html.cd-js .cd-reveal-img[data-from="left"]:not(.in) {
  clip-path: inset(0 100% 0 0 round var(--radius-lg));
}

html.cd-js .cd-reveal-img[data-from="center"]:not(.in) {
  clip-path: inset(50% 50% 50% 50% round var(--radius-lg));
}

html.cd-js .cd-reveal-img:not(.in) > * {
  scale: 1.25;
}

.cd-hx {
  position: relative;
}

.cd-hx__stage {
  gap: var(--space-6);
  padding: var(--cd-gutter);
  display: grid;
  position: relative;
}

.cd-hx__title {
  color: var(--ink);
  margin: 0;
}

.cd-hx__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.cd-hx__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-hx__media:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(to top, var(--scrim-from), var(--scrim-to) 55%);
  position: absolute;
  inset: 0;
}

.cd-hx__copy {
  inset: auto calc(var(--cd-gutter) * 2) calc(var(--cd-gutter) * 2);
  z-index: 1;
  color: var(--bg);
  position: absolute;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="4"], [data-motion="5"]) .cd-hx {
      height: calc(var(--cd-vh) * 2.2);
      view-timeline: --cd-hx block;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hx__stage {
      height: var(--cd-vh);
      padding: 0;
      display: block;
      position: sticky;
      top: 0;
      overflow: clip;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hx__media {
      aspect-ratio: auto;
      border-radius: 0;
      animation: linear both cd-hx-clip;
      animation-timeline: --cd-hx;
      animation-range: contain contain 72%;
      position: absolute;
      inset: 0;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hx__media > * {
      animation: linear both cd-hx-zoom;
      animation-timeline: --cd-hx;
      animation-range: contain contain 72%;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hx__title {
      inset: var(--cd-gutter) var(--cd-gutter) auto;
      z-index: 1;
      animation: linear both cd-hx-title;
      animation-timeline: --cd-hx;
      animation-range: contain contain 38%;
      position: absolute;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hx__copy {
      inset: auto var(--cd-gutter) var(--cd-gutter);
      animation: linear both cd-hx-copy;
      animation-timeline: --cd-hx;
      animation-range: contain 60% contain 90%;
    }

    @keyframes cd-hx-clip {
      from {
        clip-path: inset(38% 20% 8% 20% round var(--radius-lg));
      }

      to {
        clip-path: inset(0);
      }
    }

    @keyframes cd-hx-zoom {
      from {
        scale: 1.3;
      }

      to {
        scale: 1;
      }
    }

    @keyframes cd-hx-title {
      to {
        opacity: 0;
        translate: 0 -32px;
      }
    }

    @keyframes cd-hx-copy {
      from {
        opacity: 0;
        translate: 0 24px;
      }

      to {
        opacity: 1;
        translate: none;
      }
    }
  }
}

.cd-stack {
  gap: var(--space-6);
  view-timeline: --cd-stack block;
  display: grid;
}

.cd-stack__card {
  top: calc(var(--cd-vh) * .1 + var(--i, 0) * 14px);
  position: sticky;
}

.cd-stack__body {
  transform-origin: 50% 0;
  position: relative;
}

.cd-stack__body:after {
  content: "";
  border-radius: inherit;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-stack__card:not(:last-child) .cd-stack__body {
      animation-name: cd-stack;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --cd-stack;
      animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%);
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-stack__card:not(:last-child) .cd-stack__body:after {
      animation-name: cd-stack-dim;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --cd-stack;
      animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%);
    }

    @keyframes cd-stack {
      to {
        scale: calc(1 - (var(--n) - var(--i)) * .035);
      }
    }

    @keyframes cd-stack-dim {
      to {
        opacity: .35;
      }
    }
  }
}

.cd-hs {
  position: relative;
}

.cd-hs__stage {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
}

.cd-hs__track {
  gap: var(--space-6);
  padding-inline: var(--cd-gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--cd-gutter);
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.cd-hs__track::-webkit-scrollbar {
  display: none;
}

.cd-hs__track > * {
  scroll-snap-align: start;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="4"], [data-motion="5"]) .cd-hs {
      height: calc(var(--cd-vh) * var(--cd-hs-len, 3));
      view-timeline: --cd-hs block;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hs__stage {
      height: var(--cd-vh);
      justify-content: center;
      position: sticky;
      top: 0;
      overflow: clip;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-hs__track {
      scroll-snap-type: none;
      width: max-content;
      animation: linear both cd-hs;
      animation-timeline: --cd-hs;
      animation-range: contain;
      overflow: visible;
    }

    @keyframes cd-hs {
      to {
        translate: calc(-100% + var(--cd-vw)) 0;
      }
    }
  }
}

.cd-hlist {
  border-top: 1px solid var(--border);
  position: relative;
}

.cd-hlist__row {
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  transition: opacity var(--dur-base) var(--ease-out);
  grid-template-columns: 3rem 1fr auto;
  text-decoration: none;
  display: grid;
}

.cd-hlist__n {
  font: 500 13px/1 var(--font-body);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.cd-hlist__t {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.01em;
  transition: translate var(--dur-slow) var(--ease-out-expo);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.cd-hlist__m {
  color: var(--ink-soft);
  font-size: 14px;
}

.cd-hlist__img {
  display: none;
}

.cd-hlist__float {
  z-index: 50;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  pointer-events: none;
  width: clamp(180px, 22vw, 280px);
  box-shadow: var(--shadow-float);
  translate: var(--fx, -999px) var(--fy, -999px);
  rotate: var(--fr, 0deg);
  opacity: 0;
  transition: scale var(--dur-slow) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  scale: .6;
}

.cd-hlist__float.is-on {
  opacity: 1;
  scale: 1;
}

.cd-hlist__float > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cd-hlist:hover .cd-hlist__row {
    opacity: .4;
  }

  .cd-hlist .cd-hlist__row:hover {
    opacity: 1;
  }

  .cd-hlist__row:hover .cd-hlist__t {
    translate: 12px;
  }
}

@media (hover: none), (pointer: coarse) {
  .cd-hlist__row {
    grid-template-columns: 3rem 1fr 64px;
  }

  .cd-hlist__m {
    display: none;
  }

  .cd-hlist__img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
    width: 64px;
    display: block;
    overflow: hidden;
  }

  .cd-hlist__img > * {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .cd-hlist__float {
    display: none;
  }
}

.cd-menu-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  width: 48px;
  height: 48px;
  color: var(--ink);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.cd-menu-toggle > span {
  background: currentColor;
  width: 18px;
  height: 1.5px;
  display: block;
}

.cd-menu {
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  padding: var(--cd-gutter);
  background: var(--ink);
  color: var(--bg);
  overscroll-behavior: contain;
  clip-path: circle(0px at var(--ox, calc(100% - 48px)) var(--oy, 48px));
  transition: clip-path var(--dur-slow) var(--ease-in-out), display var(--dur-slow) allow-discrete, overlay var(--dur-slow) allow-discrete;
  border: 0;
  margin: 0;
  position: fixed;
  inset: 0;
  overflow: auto;
}

.cd-menu:popover-open {
  clip-path: circle(150vmax at var(--ox, calc(100% - 48px)) var(--oy, 48px));
  transition-duration: var(--dur-cinematic);
  transition-timing-function: var(--ease-out-expo);
  grid-template-rows: auto 1fr auto;
  display: grid;
}

@starting-style {
  .cd-menu:popover-open {
    clip-path: circle(0px at var(--ox, calc(100% - 48px)) var(--oy, 48px));
  }
}

.cd-menu::backdrop {
  background: none;
}

.cd-menu__close {
  border: 1px solid var(--bg);
  justify-self: end;
  min-height: 44px;
  padding: 0 1.25rem;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-menu__close {
    border: 1px solid color-mix(in oklab, var(--bg) 30%, transparent);
  }
}

.cd-menu__close {
  border-radius: var(--radius-full);
  color: var(--bg);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  background: none;
}

.cd-menu__list {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-menu__list li {
  overflow: clip;
}

.cd-menu__list a {
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.02em;
  padding-block: .08em;
  font-size: clamp(2.25rem, 8vw, 5.5rem);
  line-height: 1.05;
  text-decoration: none;
  display: inline-block;
}

.cd-menu:popover-open .cd-menu__list a {
  transition: translate var(--dur-cinematic) var(--ease-out-expo);
  transition-delay: calc(.18s + min(var(--i, 0) * 60ms, var(--stagger-max, .5s)));
}

@starting-style {
  .cd-menu:popover-open .cd-menu__list a {
    translate: 0 110%;
  }
}

.cd-menu__foot {
  color: var(--bg);
  margin: 0;
  font-size: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-menu__foot {
    color: color-mix(in oklab, var(--bg) 70%, var(--ink));
  }
}

html:has(.cd-menu:popover-open) {
  overflow: hidden;
}

.cd-faq details {
  border-bottom: 1px solid var(--border);
  interpolate-size: allow-keywords;
}

.cd-faq summary {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding-block: var(--space-4);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
}

.cd-faq summary::-webkit-details-marker {
  display: none;
}

.cd-faq__x {
  transition: rotate var(--dur-base) var(--ease-out);
  flex: none;
  font-size: 20px;
  line-height: 1;
}

.cd-faq details[open] .cd-faq__x {
  rotate: 45deg;
}

.cd-faq details p {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  line-height: 1.625;
}

.cd-faq details::details-content {
  block-size: 0;
  transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
  overflow-y: clip;
}

.cd-faq details[open]::details-content {
  block-size: auto;
}

.cd-steps {
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cd-steps > li {
  gap: var(--space-4);
  display: flex;
}

.cd-steps__n {
  border-radius: var(--radius-full);
  background: var(--ink);
  width: 40px;
  height: 40px;
  color: var(--bg);
  flex: none;
  place-items: center;
  font-weight: 500;
  display: grid;
}

.cd-steps h3 {
  font: 500 18px/1.556 var(--font-body);
  margin: 0;
}

.cd-steps p {
  color: var(--ink-soft);
  margin: 4px 0 0;
}

.cd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.cd-over {
  z-index: 1;
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative;
  box-shadow: 0 24px 48px -24px #00000040;
}

.cd-footer {
  z-index: 0;
  align-content: end;
  gap: var(--space-8);
  min-height: calc(var(--cd-vh) * .7);
  padding: var(--cd-gutter);
  background: var(--ink);
  color: var(--bg);
  display: grid;
  position: sticky;
  bottom: 0;
  overflow: clip;
  container-type: inline-size;
}

.cd-footer__mark {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  font-size: calc(100cqi / (var(--cd-mark-chars, 10) * .56));
  letter-spacing: -.04em;
  white-space: nowrap;
  justify-self: start;
  margin: 0;
  line-height: .85;
}

.cd-footer a {
  color: inherit;
}

.cd-drag {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--cd-gutter);
  scrollbar-width: none;
  cursor: grab;
  overflow-x: auto;
}

.cd-drag::-webkit-scrollbar {
  display: none;
}

.cd-drag.is-draggable {
  scroll-snap-type: none;
  touch-action: pan-y;
  overflow: hidden;
}

.cd-drag.is-draggable:active {
  cursor: grabbing;
}

.cd-drag__track {
  gap: var(--space-6);
  width: max-content;
  padding-inline: var(--cd-gutter);
  display: flex;
}

.cd-drag__item {
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  flex: none;
  width: clamp(220px, 30vw, 340px);
}

.cd-drag__item img {
  pointer-events: none;
}

.cd-drag__nav {
  gap: var(--space-2);
  display: flex;
}

.cd-drag__nav button {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
  font-size: 18px;
  display: grid;
}

:is([data-motion="1"], [data-motion="2"]) {
  --ease-spatial-fast: var(--ease-spatial-standard);
  --ease-spatial: var(--ease-spatial-standard);
  --ease-spatial-slow: var(--ease-spatial-standard);
  --dur-spatial-slow: .75s;
}

.cd-icon {
  fill: currentColor;
  vertical-align: -.22em;
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.cd-icon .cd-i-b, :is([data-theme="trattoria"], [data-theme="servizio"], [data-theme="crudo"], [data-theme="espressiva"]) .cd-icon:not([data-weight="light"]) .cd-i-l, .cd-icon[data-weight="bold"] .cd-i-l {
  display: none;
}

:is([data-theme="trattoria"], [data-theme="servizio"], [data-theme="crudo"], [data-theme="espressiva"]) .cd-icon:not([data-weight="light"]) .cd-i-b, .cd-icon[data-weight="bold"] .cd-i-b {
  display: inline;
}

.cd-glass {
  --glass-bg: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-glass {
    --glass-bg: color-mix(in oklab, var(--surface) 64%, transparent);
  }
}

.cd-glass {
  isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 1px 0 oklab(100% 0 5.96046e-8 / .5), inset 0 -1px 0 var(--ink), 0 1px 2px #0000000f, 0 10px 30px #0000001f;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-glass {
    box-shadow: inset 0 1px 0 oklab(100% 0 5.96046e-8 / .5), inset 0 -1px 0 color-mix(in oklab, var(--ink) 7%, transparent), 0 1px 2px #0000000f, 0 10px 30px #0000001f;
  }
}

.cd-glass:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-composite: xor;
  -webkit-mask-composite: xor, source-over;
  background: linear-gradient(135deg, oklab(100% 0 5.96046e-8 / .75), oklab(100% 0 5.96046e-8 / .08) 38% 62%, oklab(100% 0 5.96046e-8 / .4));
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.cd-glass--clear {
  --glass-bg: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-glass--clear {
    --glass-bg: color-mix(in oklab, var(--surface) 16%, transparent);
  }
}

.cd-glass--clear {
  -webkit-backdrop-filter: blur(8px) saturate(1.8);
  backdrop-filter: blur(8px) saturate(1.8);
}

.cd-glass--dim {
  --glass-bg: #00000059;
  color: #fff;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cd-glass {
    --glass-bg: var(--surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .cd-glass {
      --glass-bg: color-mix(in oklab, var(--surface) 94%, transparent);
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cd-glass, .cd-glass--clear {
    --glass-bg: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.cd-nav {
  z-index: 40;
  padding: 12px var(--cd-gutter) 0;
  pointer-events: none;
  position: sticky;
  top: 0;
}

.cd-nav:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), transparent);
  position: absolute;
  inset: 0 0 -28px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-nav:before {
    background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 72%, transparent), transparent);
  }
}

.cd-nav:before {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 45%, #0000);
  mask-image: linear-gradient(#000 45%, #0000);
}

.cd-nav__bar {
  pointer-events: auto;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-full);
  transform-origin: 50% 0;
  max-width: 1080px;
  margin-inline: auto;
  padding: 8px 8px 8px 22px;
  display: flex;
}

.cd-nav__brand {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  white-space: nowrap;
  margin-right: auto;
  font-size: 21px;
  line-height: 1;
  text-decoration: none;
}

.cd-nav__links {
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
}

.cd-nav__links a {
  z-index: 1;
  border-radius: var(--radius-full);
  color: var(--ink-soft);
  font: 500 15px/1 var(--font-body);
  transition: color var(--dur-effects) var(--ease-effects);
  padding: 11px 15px;
  text-decoration: none;
  display: block;
  position: relative;
}

.cd-nav__links a:is([aria-current="page"], :hover, :focus-visible) {
  color: var(--ink);
}

.cd-nav__links:not(.has-pill) a[aria-current="page"] {
  background: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-nav__links:not(.has-pill) a[aria-current="page"] {
    background: color-mix(in oklab, var(--ink) 9%, transparent);
  }
}

.cd-nav__cta {
  min-height: 44px;
}

.cd-nav__toggle {
  display: none;
}

@media (max-width: 760px) {
  .cd-nav__links, .cd-nav__cta {
    display: none;
  }

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

.cd-pill {
  z-index: 0;
  width: var(--pill-w, 0px);
  height: var(--pill-h, 0px);
  translate: var(--pill-x, 0px) var(--pill-y, 0px);
  border-radius: var(--radius-full);
  background: var(--ink);
  position: absolute;
  top: 0;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-pill {
    background: color-mix(in oklab, var(--ink) 9%, transparent);
  }
}

.cd-pill {
  pointer-events: none;
  transition: translate var(--dur-spatial-fast) var(--ease-spatial-fast), width var(--dur-spatial-fast) var(--ease-spatial-fast), opacity var(--dur-effects) var(--ease-effects);
}

.cd-pill.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
    :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-nav__bar {
      animation: linear both cd-nav-compact;
      animation-timeline: scroll();
      animation-range: 0 160px;
    }

    @keyframes cd-nav-compact {
      to {
        background-color: color-mix(in oklab, var(--surface) 80%, transparent);
        translate: 0 -4px;
        scale: .95;
      }
    }
  }
}

.cd-actionbar {
  z-index: 45;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  transition: translate var(--dur-spatial) var(--ease-spatial), opacity var(--dur-effects) var(--ease-effects);
  border-radius: 28px;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4px;
  padding: 6px;
  display: grid;
  position: fixed;
}

@starting-style {
  .cd-actionbar {
    opacity: 0;
    translate: 0 130%;
  }
}

.cd-actionbar__item {
  min-height: 54px;
  color: var(--ink);
  font: 600 11px/1.1 var(--font-body);
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: scale var(--dur-fast) var(--ease-spring-snappy), background-color var(--dur-effects) var(--ease-effects);
  border-radius: 22px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  text-decoration: none;
  display: grid;
}

.cd-actionbar__item .cd-icon {
  width: 22px;
  height: 22px;
}

.cd-actionbar__item:active {
  background-color: var(--ink);
  scale: .94;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-actionbar__item:active {
    background-color: color-mix(in oklab, var(--ink) 8%, transparent);
  }
}

.cd-actionbar__item--primary {
  background: var(--ink);
  color: var(--bg);
}

.cd-actionbar__item--primary:active {
  background: var(--ink);
}

@media (min-width: 769px) {
  .cd-actionbar:not(.cd-actionbar--always) {
    display: none;
  }
}

@media (max-width: 768px) {
  body:has(.cd-actionbar:not(.cd-actionbar--inline)) {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

.cd-fab {
  z-index: 46;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--accent);
  width: 60px;
  height: 60px;
  color: var(--accent-ink);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--dur-spatial-fast) var(--ease-spatial-fast), background-color var(--dur-effects) var(--ease-effects), color var(--dur-effects) var(--ease-effects), scale var(--dur-fast) var(--ease-spring-snappy);
  border: 0;
  border-radius: 20px;
  place-items: center;
  display: grid;
  position: fixed;
}

.cd-fab:active {
  scale: .94;
}

.cd-fab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-fab .cd-icon {
  width: 26px;
  height: 26px;
  transition: rotate var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-fab:has( + .cd-fab-menu:popover-open) {
  background: var(--ink);
  color: var(--bg);
  border-radius: 30px;
}

.cd-fab:has( + .cd-fab-menu:popover-open) .cd-icon {
  rotate: 135deg;
}

.cd-fab-menu {
  inset: auto max(16px, env(safe-area-inset-right)) calc(16px + 60px + 14px + env(safe-area-inset-bottom)) auto;
  transition: display var(--dur-exit) allow-discrete, overlay var(--dur-exit) allow-discrete;
  background: none;
  border: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  display: none;
  position: fixed;
  overflow: visible;
}

.cd-fab-menu:popover-open {
  display: flex;
}

.cd-fab-menu::backdrop {
  background: none;
}

.cd-fab-menu__item {
  border-radius: var(--radius-full);
  background: var(--surface);
  min-height: 52px;
  color: var(--ink);
  font: 600 15px/1 var(--font-body);
  box-shadow: var(--shadow-float);
  transform-origin: 100%;
  opacity: 0;
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast), translate var(--dur-spatial-fast) var(--ease-spatial-fast);
  transition-delay: min(calc(var(--i, 0) * 45ms), var(--stagger-max, .5s));
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 20px;
  text-decoration: none;
  display: inline-flex;
  translate: 0 12px;
  scale: .6;
}

.cd-fab-menu__item .cd-icon {
  box-sizing: border-box;
  background: var(--accent);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 8px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-fab-menu__item .cd-icon {
    background: color-mix(in oklab, var(--accent) 16%, var(--surface));
  }
}

.cd-fab-menu__item .cd-icon {
  color: var(--ink);
}

.cd-fab-menu:popover-open .cd-fab-menu__item {
  opacity: 1;
  translate: 0;
  scale: 1;
}

@starting-style {
  .cd-fab-menu:popover-open .cd-fab-menu__item {
    opacity: 0;
    translate: 0 12px;
    scale: .6;
  }
}

.cd-fab-menu__item:last-child {
  --i: 0;
}

.cd-fab-menu__item:nth-last-child(2) {
  --i: 1;
}

.cd-fab-menu__item:nth-last-child(3) {
  --i: 2;
}

.cd-fab-menu__item:nth-last-child(4) {
  --i: 3;
}

.cd-fab-menu__item:nth-last-child(5) {
  --i: 4;
}

.cd-fab-menu__item:nth-last-child(6) {
  --i: 5;
}

.cd-xcards {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  display: grid;
}

.cd-xcard {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  gap: 10px;
  padding: 0;
  display: grid;
}

.cd-xcard__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cd-xcard__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: scale var(--dur-slow) var(--ease-out);
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .cd-xcard:hover .cd-xcard__media > * {
    scale: 1.04;
  }
}

.cd-xcard:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.cd-xcard__title {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  justify-self: start;
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.cd-xcard__meta {
  color: var(--ink-soft);
  margin: 0;
  font-size: 14px;
}

.cd-xdialog {
  background: var(--surface);
  width: min(980px, 100% - 32px);
  max-width: none;
  max-height: min(92svh, 920px);
  color: var(--ink);
  overscroll-behavior: contain;
  border: 0;
  border-radius: 28px;
  padding: 0;
  overflow: auto;
  box-shadow: 0 30px 80px #0000004d;
}

.cd-xdialog::backdrop {
  background: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-xdialog::backdrop {
    background: color-mix(in oklab, var(--ink) 38%, transparent);
  }
}

.cd-xdialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cd-xdialog__grid {
  grid-template-columns: 1.1fr 1fr;
  display: grid;
}

.cd-xdialog__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.cd-xdialog__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-xdialog__body {
  align-content: start;
  gap: 16px;
  padding: 36px 32px;
  display: grid;
}

.cd-xdialog__title {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.02em;
  justify-self: start;
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
}

.cd-xdialog__close {
  z-index: 2;
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

@media (max-width: 700px) {
  .cd-xdialog {
    border-radius: 28px 28px 0 0;
    width: 100%;
    max-height: 94svh;
    margin-bottom: 0;
  }

  .cd-xdialog__grid {
    grid-template-columns: 1fr;
  }

  .cd-xdialog__media {
    aspect-ratio: 4 / 3;
  }
}

html:has(dialog[open]:is(.cd-xdialog, .cd-lb)) {
  overflow: hidden;
}

::view-transition-group(*.cd-x) {
  animation-duration: var(--dur-spatial);
  animation-timing-function: var(--ease-spatial);
}

.cd-gallery {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  display: grid;
}

.cd-gallery__item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.cd-gallery__item > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-gallery__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-lb {
  color: #fff;
  background: none;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.cd-lb::backdrop {
  background: rgb(10 10 12 / var(--lb-dim, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cd-lb__stage {
  touch-action: none;
  cursor: grab;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 64px 0 88px;
}

.cd-lb__stage.is-zoomed {
  cursor: move;
}

.cd-lb__media {
  max-width: min(100%, 1400px);
  max-height: 100%;
  aspect-ratio: var(--lb-ratio, auto);
  transform: translate(var(--lb-x, 0px), var(--lb-y, 0px)) scale(var(--lb-z, 1));
  transform-origin: 50%;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 6px;
}

div.cd-lb__media {
  width: min(100%, 56svh, 900px);
  height: auto;
  aspect-ratio: var(--lb-ratio, 4 / 5);
}

.cd-lb__media.is-settling {
  transition: transform var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-lb__media.is-enter-next, .cd-lb__media.is-enter-prev {
  transition: translate var(--dur-spatial) var(--ease-spatial), opacity var(--dur-effects) var(--ease-effects);
}

@starting-style {
  .cd-lb__media.is-enter-next {
    opacity: 0;
    translate: 48px;
  }

  .cd-lb__media.is-enter-prev {
    opacity: 0;
    translate: -48px;
  }
}

.cd-lb__bar {
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  inset: 12px 12px auto;
}

.cd-lb__count {
  font: 500 14px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: #fffc;
  margin: 0 auto 0 8px;
}

.cd-lb__caption {
  text-align: center;
  font: 400 15px/1.4 var(--font-body);
  color: #ffffffd9;
  margin: 0;
  position: absolute;
  inset: auto 16px 24px;
}

.cd-lb__btn {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 44px;
  height: 44px;
  transition: background-color var(--dur-effects) var(--ease-effects), scale var(--dur-fast) var(--ease-spring-snappy);
  background: #ffffff1f;
  border: 0;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.cd-lb__btn svg {
  fill: currentColor;
  width: 22px;
  height: 22px;
}

.cd-lb__btn:hover {
  background: #fff3;
}

.cd-lb__btn:active {
  scale: .92;
}

.cd-lb__btn:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #fff;
}

.cd-lb__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.cd-lb__nav--prev {
  left: 16px;
}

.cd-lb__nav--next {
  right: 16px;
}

@media (hover: none), (pointer: coarse) {
  .cd-lb__nav {
    display: none;
  }
}

@property --cd-mb-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.cd-mb {
  --mb-h: 320px;
  --mb-g: 8px;
  --mb-L: calc(100cqi * .56);
  --mb-M: calc(100cqi * .26);
  --mb-S: calc(100cqi - var(--mb-L) - var(--mb-M) - 2 * var(--mb-g));
  position: relative;
  container-type: inline-size;
}

.cd-mb__scroller {
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overflow-x: auto;
}

.cd-mb__scroller::-webkit-scrollbar {
  display: none;
}

.cd-mb__stage {
  gap: var(--mb-g);
  display: flex;
}

.cd-mb__item {
  width: calc(var(--mb-L) * .8);
  height: var(--mb-h);
  border-radius: var(--radius-lg);
  color: #fff;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  flex: none;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.cd-mb__item > :first-child {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-mb__item:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(to top, #0000008c, #0000 55%);
  position: absolute;
  inset: 0;
}

.cd-mb__label {
  z-index: 1;
  font: 600 17px/1.2 var(--font-body);
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
}

.cd-mb__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-mb__track {
  display: none;
}

.cd-mb__nav {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.cd-mb__nav button {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__scroller {
      scroll-timeline: --cd-mb inline;
      display: grid;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) :is(.cd-mb__stage, .cd-mb__track) {
      grid-area: 1 / 1;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__stage {
      z-index: 1;
      width: 100cqi;
      height: var(--mb-h);
      animation: linear both cd-mb-p;
      animation-timeline: --cd-mb;
      display: block;
      position: sticky;
      left: 0;
    }

    @keyframes cd-mb-p {
      from {
        --cd-mb-p: 0;
      }

      to {
        --cd-mb-p: calc(var(--n, 1) - 1);
      }
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__track {
      opacity: 0;
      pointer-events: none;
      display: flex;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__track > span {
      width: calc(var(--mb-L) + var(--mb-g));
      height: var(--mb-h);
      scroll-snap-align: start;
      flex: none;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__track > span:last-child {
      width: 100cqi;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__item {
      --d: calc(var(--i, 0) - var(--cd-mb-p));
      --w: calc(var(--mb-S)
        + (var(--mb-L) - var(--mb-S)) * clamp(0, 1 + var(--d), 1)
        + (var(--mb-M) - var(--mb-L)) * clamp(0, var(--d), 1)
        + (var(--mb-S) - var(--mb-M)) * clamp(0, var(--d) - 1, 1));
      --x: calc((var(--mb-S) + var(--mb-g)) * min(var(--d), 0)
        + (var(--mb-L) + var(--mb-g)) * clamp(0, var(--d), 1)
        + (var(--mb-M) + var(--mb-g)) * clamp(0, var(--d) - 1, 1)
        + (var(--mb-S) + var(--mb-g)) * max(0, var(--d) - 2));
      width: var(--mb-L);
      scroll-snap-align: none;
      translate: calc(var(--x) - (var(--mb-L) - var(--w)) / 2) 0;
      clip-path: inset(0 calc((var(--mb-L) - var(--w)) / 2) round var(--radius-lg));
      border-radius: 0;
      position: absolute;
      top: 0;
      left: 0;
      overflow: visible;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-mb__label {
      left: calc((var(--mb-L) - var(--w)) / 2 + 18px);
      opacity: clamp(0, 1 - 2 * max(var(--d), -1 * var(--d)), 1);
    }
  }
}

.cd-note {
  --note: var(--ink);
  --note-bg: var(--surface);
  border: 1px solid var(--note);
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-note {
    border: 1px solid color-mix(in oklab, var(--note) 28%, transparent);
  }
}

.cd-note {
  border-radius: var(--radius-md);
  background: var(--note-bg);
  color: var(--ink);
}

.cd-note > .cd-icon {
  width: 22px;
  height: 22px;
  color: var(--note);
  margin-top: 1px;
}

.cd-note strong {
  color: var(--note);
  font-weight: 600;
}

.cd-note p {
  margin: 0;
}

.cd-note--success {
  --note: var(--success);
  --note-bg: var(--success-soft);
}

.cd-note--warning {
  --note: var(--warning);
  --note-bg: var(--warning-soft);
}

.cd-note--danger {
  --note: var(--danger);
  --note-bg: var(--danger-soft);
}

.cd-field-error {
  color: var(--danger);
  font-size: 14px;
}

@property --tl-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --ba-n {
  syntax: "<number>";
  inherits: true;
  initial-value: 50;
}

@property --cd-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.cd-shape {
  clip-path: var(--cd-shape, inset(0 round var(--radius-lg)));
  transition: clip-path var(--dur-spatial) var(--ease-spatial);
}

.cd-shape > img, .cd-shape > .cd-ph, .cd-shape > video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .cd-shape[data-shape-hover]:hover {
    clip-path: var(--cd-shape-hover, var(--cd-shape));
  }
}

.cd-mask {
  -webkit-mask: var(--cd-mask) center / 100% 100% no-repeat;
  -webkit-mask: var(--cd-mask) center / 100% 100% no-repeat;
  -webkit-mask: var(--cd-mask) center / 100% 100% no-repeat;
  mask: var(--cd-mask) center / 100% 100% no-repeat;
}

.cd-mask > img, .cd-mask > .cd-ph {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-sticker {
  isolation: isolate;
  width: var(--sticker, 112px);
  aspect-ratio: 1;
  box-sizing: border-box;
  color: var(--accent-ink);
  font: 600 13px/1.15 var(--font-body);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  place-items: center;
  padding: 18%;
  display: inline-grid;
  position: relative;
}

.cd-sticker:before {
  content: "";
  z-index: -1;
  background: var(--accent);
  clip-path: var(--cd-shape, circle(50%));
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-sticker[data-spin]:before {
      animation: linear both cd-spin;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes cd-spin {
  from {
    rotate: -60deg;
  }

  to {
    rotate: 120deg;
  }
}

.cd-loader {
  --size: 48px;
  width: var(--size);
  height: var(--size);
  color: var(--accent);
  vertical-align: middle;
  flex: none;
  display: inline-block;
  position: relative;
}

.cd-loader:before, .cd-loader__shape {
  content: "";
  background: currentColor;
  position: absolute;
  inset: 6%;
}

.cd-loader:before {
  animation: cd-loader-pulse .9s var(--ease-in-out) infinite alternate;
  border-radius: 50%;
}

.cd-loader.is-morph:before {
  display: none;
}

.cd-loader--contained {
  background: var(--accent);
  border-radius: 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-loader--contained {
    background: color-mix(in oklab, var(--accent) 16%, var(--surface));
  }
}

.cd-loader--contained:before, .cd-loader--contained .cd-loader__shape {
  inset: 20%;
}

.cd-loader--sm {
  --size: 32px;
}

.cd-loader--xs {
  --size: 20px;
}

@keyframes cd-loader-pulse {
  from {
    opacity: .6;
    scale: .7;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.cd-btn--morph {
  transition: color var(--dur-slow) var(--ease-out-expo), translate var(--dur-base) var(--ease-spring), scale var(--dur-fast) var(--ease-spring-snappy), border-radius var(--dur-spatial-fast) var(--ease-spatial-fast);
  border-radius: 14px;
}

.cd-btn--morph:active, .cd-btn--morph.cd-btn--round {
  border-radius: var(--radius-full);
}

.cd-btn--morph.cd-btn--round:active {
  border-radius: 14px;
}

.cd-itoggle {
  isolation: isolate;
  width: 52px;
  height: 52px;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 22px;
  display: inline-grid;
  position: relative;
}

.cd-itoggle:before {
  content: "";
  z-index: -1;
  background: var(--ink);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-itoggle:before {
    background: color-mix(in oklab, var(--ink) 7%, var(--surface));
  }
}

.cd-itoggle:before {
  clip-path: var(--shape-off, circle(50%));
  transition: clip-path var(--dur-spatial-fast) var(--ease-spatial-fast), background-color var(--dur-effects) var(--ease-effects), scale var(--dur-fast) var(--ease-spring-snappy);
}

.cd-itoggle:active:before {
  scale: .9;
}

.cd-itoggle[aria-pressed="true"] {
  color: var(--accent-ink);
}

.cd-itoggle[aria-pressed="true"]:before {
  background: var(--accent);
  clip-path: var(--shape-on, inset(0 round 16px));
}

.cd-itoggle .cd-icon {
  vertical-align: 0;
  width: 1em;
  height: 1em;
}

.cd-itoggle[aria-pressed="true"] .cd-icon .cd-i-l {
  display: none;
}

.cd-itoggle[aria-pressed="true"] .cd-icon .cd-i-b {
  display: inline;
}

.cd-itoggle[aria-pressed="true"] .cd-icon {
  animation: cd-bump var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-itoggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@keyframes cd-bump {
  from {
    scale: .6;
  }
}

.cd-chips {
  gap: var(--space-2);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.cd-chip {
  display: inline-flex;
  position: relative;
}

.cd-chip > input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
  position: absolute;
}

.cd-chip > span {
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  min-height: 44px;
  color: var(--ink);
  font: 500 15px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--dur-spatial-fast) var(--ease-spatial-fast), padding var(--dur-spatial-fast) var(--ease-spatial-fast), scale var(--dur-fast) var(--ease-spring-snappy), background-color var(--dur-effects) var(--ease-effects), border-color var(--dur-effects) var(--ease-effects);
  align-items: center;
  padding: 0 18px;
  display: inline-flex;
}

.cd-chip > span:before {
  content: "";
  width: 0;
  height: 1em;
  transition: width var(--dur-spatial-fast) var(--ease-spatial-fast), margin var(--dur-spatial-fast) var(--ease-spatial-fast);
  background: currentColor;
  flex: none;
  margin-right: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cd-chip > span:active {
  scale: .96;
}

.cd-chip > input:checked + span {
  border-color: var(--accent);
  border-radius: 12px;
  padding-left: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-chip > input:checked + span {
    border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  }
}

.cd-chip > input:checked + span {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-chip > input:checked + span {
    background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  }
}

.cd-chip > input:checked + span:before {
  width: 1.05em;
  margin-right: 7px;
}

.cd-chip > input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-chip > input:disabled + span {
  color: var(--ink-soft);
  cursor: not-allowed;
  background: none;
  border-style: dashed;
  text-decoration: line-through;
}

.cd-sbtn {
  transition: color var(--dur-slow) var(--ease-out-expo), translate var(--dur-base) var(--ease-spring), scale var(--dur-fast) var(--ease-spring-snappy), width var(--dur-spatial) var(--ease-spatial), background-color var(--dur-effects-slow) var(--ease-effects-slow);
}

.cd-sbtn__face {
  white-space: nowrap;
  transition: translate var(--dur-spatial-fast) var(--ease-spatial-fast), opacity var(--dur-effects) var(--ease-effects);
  align-items: center;
  gap: .6em;
  display: inline-flex;
}

.cd-sbtn__face.is-pre {
  opacity: 0;
  transition: none;
  translate: 0 70%;
}

.cd-sbtn__face.is-out {
  opacity: 0;
  position: absolute;
  left: 1.5rem;
  translate: 0 -70%;
}

.cd-sbtn:not([data-state="idle"]):before {
  display: none;
}

.cd-sbtn[data-state="loading"] {
  cursor: progress;
}

.cd-sbtn[data-state="success"] {
  background: var(--success-soft);
  color: var(--success);
  box-shadow: inset 0 0 0 1px var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-sbtn[data-state="success"] {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success) 45%, transparent);
  }
}

.cd-sbtn[data-state="error"] {
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-sbtn[data-state="error"] {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 45%, transparent);
  }
}

.cd-sbtn .cd-loader {
  color: currentColor;
}

.cd-sbtn__check, .cd-sbtn__x {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

.cd-sbtn__check path, .cd-sbtn__x path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1px;
  transition: stroke-dashoffset .42s var(--ease-out) .14s;
}

.cd-sbtn__face.is-in .cd-sbtn__check path, .cd-sbtn__face.is-in .cd-sbtn__x path {
  stroke-dashoffset: 0;
}

.cd-field {
  gap: 6px;
  display: grid;
}

fieldset.cd-field {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

fieldset.cd-field > legend {
  margin-bottom: 8px;
  padding: 0;
}

.cd-field > label, .cd-field__label {
  font: 500 15px/1.4 var(--font-body);
  color: var(--ink);
}

.cd-field__hint {
  color: var(--ink-soft);
  font-size: 14px;
}

.cd-input {
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  width: 100%;
  min-height: 48px;
  color: var(--ink);
  font: inherit;
  transition: border-color var(--dur-effects) var(--ease-effects);
  padding: 12px 14px;
  font-size: 16px;
}

textarea.cd-input {
  resize: vertical;
  min-height: 96px;
}

.cd-input:hover {
  border-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-input:hover {
    border-color: color-mix(in oklab, var(--ink) 35%, var(--border));
  }
}

.cd-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

.cd-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.cd-qty {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  justify-self: start;
  align-items: center;
  gap: 4px;
  padding: 4px;
  display: inline-flex;
}

.cd-qty button {
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-qty button {
    background: color-mix(in oklab, var(--ink) 7%, var(--surface));
  }
}

.cd-qty button {
  color: var(--ink);
  cursor: pointer;
  transition: scale var(--dur-fast) var(--ease-spring-snappy);
  font-size: 20px;
}

.cd-qty button:active {
  scale: .9;
}

.cd-qty button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-qty input {
  width: 3ch;
  color: var(--ink);
  font: 600 20px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  background: none;
  border: 0;
  padding: 0;
}

.cd-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cd-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cd-qty input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.cd-qty.is-bump input {
  animation: cd-bump var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-stepper {
  gap: var(--space-6);
  max-width: 40rem;
  display: grid;
}

.cd-stepper__stage {
  display: grid;
}

.cd-stepper__step {
  gap: var(--space-4);
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.cd-stepper__step + .cd-stepper__step {
  margin-top: var(--space-8);
}

.cd-stepper__step[hidden] {
  display: none;
}

.cd-stepper.is-ready .cd-stepper__step + .cd-stepper__step {
  margin-top: 0;
}

.cd-stepper__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.01em;
  padding: 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.15;
}

.cd-stepper__title:focus {
  outline: none;
}

.cd-stepper__head {
  gap: 10px;
  display: grid;
}

.cd-stepper__label {
  font: 500 14px/1.3 var(--font-body);
  color: var(--ink-soft);
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  display: flex;
}

.cd-stepper__t {
  color: var(--ink);
}

.cd-stepper__bar {
  background: var(--border);
  border-radius: 4px;
  height: 4px;
  overflow: hidden;
}

.cd-stepper__bar > span {
  background: var(--accent);
  transform-origin: 0;
  height: 100%;
  scale: var(--p, 0) 1;
  transition: scale var(--dur-spatial) var(--ease-spatial);
  display: block;
}

.cd-stepper__actions {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  display: flex;
}

.cd-stepper__actions [data-step="next"], .cd-stepper__actions [type="submit"] {
  margin-left: auto;
}

.cd-stepper__actions [hidden] {
  display: none;
}

.cd-summary {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  margin: 0;
  display: grid;
}

.cd-summary dt {
  color: var(--ink-soft);
}

.cd-summary dd {
  margin: 0;
  font-weight: 500;
}

::view-transition-group(cd-step) {
  animation-duration: var(--dur-spatial);
  animation-timing-function: var(--ease-spatial);
}

::view-transition-image-pair(cd-step) {
  overflow: clip;
}

html:active-view-transition-type(cd-next)::view-transition-old(cd-step) {
  animation: var(--dur-spatial) var(--ease-spatial) both cd-step-out-l;
}

html:active-view-transition-type(cd-next)::view-transition-new(cd-step) {
  animation: var(--dur-spatial) var(--ease-spatial) both cd-step-in-r;
}

html:active-view-transition-type(cd-prev)::view-transition-old(cd-step) {
  animation: var(--dur-spatial) var(--ease-spatial) both cd-step-out-r;
}

html:active-view-transition-type(cd-prev)::view-transition-new(cd-step) {
  animation: var(--dur-spatial) var(--ease-spatial) both cd-step-in-l;
}

@keyframes cd-step-out-l {
  to {
    opacity: 0;
    translate: -18%;
  }
}

@keyframes cd-step-in-r {
  from {
    opacity: 0;
    translate: 18%;
  }
}

@keyframes cd-step-out-r {
  to {
    opacity: 0;
    translate: 18%;
  }
}

@keyframes cd-step-in-l {
  from {
    opacity: 0;
    translate: -18%;
  }
}

.cd-rotate {
  white-space: nowrap;
}

.cd-rotate__box {
  white-space: pre;
  transition: width var(--dur-spatial) var(--ease-spatial);
  display: inline-block;
  position: relative;
}

.cd-rotate__w {
  display: inline-block;
}

.cd-rotate__w--out {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.cd-rotate__c {
  transition: translate var(--dur-spatial) var(--ease-spatial), opacity var(--dur-effects-slow) var(--ease-effects-slow), filter var(--dur-effects-slow) var(--ease-effects-slow);
  transition-delay: calc(var(--d, 0) * 1ms);
  display: inline-block;
}

.cd-rotate__c.is-from-below {
  opacity: 0;
  filter: blur(4px);
  transition: none;
  translate: 0 .42em;
}

.cd-rotate__c.is-leaving {
  opacity: 0;
  filter: blur(4px);
  translate: 0 -.42em;
}

.cd-mark {
  --mark: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-mark {
    --mark: color-mix(in oklab, var(--accent) 28%, transparent);
  }
}

.cd-mark {
  color: inherit;
  background: linear-gradient(var(--mark), var(--mark)) 0 88% / 100% 62% no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  margin-inline: -.08em;
  padding-inline: .08em;
}

.cd-mark[data-mark="underline"] {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% .09em no-repeat;
  padding-bottom: .04em;
}

.cd-mark[data-mark="circle"] {
  box-shadow: 0 0 0 2px var(--accent);
  background: none;
  border-radius: 999px;
  margin-inline: 0;
  padding-inline: .04em;
  display: inline-block;
  position: relative;
}

.cd-mark.is-drawn {
  background: var(--mark-img) 0 50% / 0% 100% no-repeat;
  transition: background-size .9s var(--ease-out) calc(var(--i, 0) * .28s + .12s);
}

.cd-mark.is-drawn.in {
  background-size: 100% 100%;
}

.cd-mark[data-mark="circle"].is-drawn {
  box-shadow: none;
  background: none;
}

.cd-mark__svg {
  width: calc(100% + .8em);
  height: calc(100% + .6em);
  color: var(--accent);
  pointer-events: none;
  position: absolute;
  top: -.3em;
  left: -.4em;
  overflow: visible;
}

.cd-mark__svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1px;
  transition: stroke-dashoffset 1s var(--ease-out) calc(var(--i, 0) * .28s + .12s);
}

.cd-mark.in .cd-mark__svg path {
  stroke-dashoffset: 0;
}

[data-motion="1"] .cd-mark.is-drawn {
  background-size: 100% 100%;
  transition: none;
}

[data-motion="1"] .cd-mark__svg path {
  stroke-dashoffset: 0;
  transition: none;
}

.cd-tl {
  --tl-year: 9rem;
  --tl-gap: 64px;
}

.cd-tl__track {
  view-timeline: --cd-tl block;
  position: relative;
}

.cd-tl__list {
  gap: clamp(56px, 9vw, 112px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cd-tl__item {
  grid-template-columns: var(--tl-year) minmax(0, 1fr);
  column-gap: var(--tl-gap);
  view-timeline: --cd-tl-item block;
  align-items: start;
  display: grid;
  position: relative;
}

.cd-tl__year {
  top: var(--cd-sticky-top, 96px);
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  text-align: right;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  position: sticky;
}

.cd-tl__body {
  gap: var(--space-3);
  padding-top: .35em;
  display: grid;
}

.cd-tl__body h3 {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}

.cd-tl__body p {
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0;
}

.cd-tl__media {
  margin: var(--space-2) 0 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  max-width: 36rem;
  overflow: hidden;
}

.cd-tl__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-tl__rail {
  top: 0;
  bottom: 0;
  left: calc(var(--tl-year) + var(--tl-gap) / 2 - 1px);
  background: var(--border);
  pointer-events: none;
  border-radius: 2px;
  width: 2px;
  position: absolute;
  container-type: size;
}

.cd-tl__rail:before {
  content: "";
  border-radius: inherit;
  background: var(--accent);
  transform-origin: top;
  scale: 1 var(--tl-p);
  position: absolute;
  inset: 0;
}

.cd-tl__rail:after {
  content: "";
  background: var(--accent);
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 6px var(--accent);
  border-radius: 50%;
  margin: -6px 0 0 -6px;
  position: absolute;
  top: 0;
  left: 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-tl__rail:after {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
  }
}

.cd-tl__rail:after {
  translate: 0 calc(var(--tl-p) * 100cqh);
  opacity: 0;
}

.cd-tl__item:before {
  content: "";
  top: .9rem;
  left: calc(var(--tl-year) + var(--tl-gap) / 2 - 8px);
  box-sizing: border-box;
  border: 2px solid var(--accent);
  background: var(--accent);
  z-index: 1;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-tl__rail {
      animation: linear both cd-tl-p;
      animation-timeline: --cd-tl;
      animation-range: cover calc(var(--cd-vh) * .5) cover calc(100% - var(--cd-vh) * .5);
    }

    :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-tl__rail:after {
      opacity: 1;
    }

    :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-tl__item:before {
      animation: linear both cd-tl-dot;
      animation-timeline: --cd-tl-item;
      animation-range: cover calc(var(--cd-vh) * .5 + .9rem) cover calc(var(--cd-vh) * .5 + .9rem + 40px);
    }

    :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-tl__year {
      animation: linear both cd-tl-year;
      animation-timeline: --cd-tl-item;
      animation-range: cover calc(var(--cd-vh) * .5 - 40px) cover calc(100% - var(--cd-vh) * .5 + 40px);
    }

    @keyframes cd-tl-p {
      from {
        --tl-p: 0;
      }

      to {
        --tl-p: 1;
      }
    }

    @keyframes cd-tl-dot {
      from {
        background-color: var(--bg);
        scale: .8;
      }

      to {
        background-color: var(--accent);
        scale: 1;
      }
    }

    @keyframes cd-tl-year {
      0%, 100% {
        opacity: .32;
      }

      6%, 94% {
        opacity: 1;
      }
    }
  }
}

@media (max-width: 700px) {
  .cd-tl {
    --tl-year: 0px;
    --tl-gap: 40px;
  }

  .cd-tl__item {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 40px;
  }

  .cd-tl__year {
    text-align: left;
    font-size: 2.25rem;
    position: static;
  }

  .cd-tl__rail {
    left: 11px;
  }

  .cd-tl__item:before {
    top: .6rem;
    left: 4px;
  }
}

.cd-sp, .cd-sp__steps {
  gap: clamp(40px, 7vw, 72px);
  display: grid;
}

.cd-sp__step {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  display: grid;
}

.cd-sp__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.cd-sp__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-sp__media[data-shape] {
  aspect-ratio: 1;
  clip-path: var(--cd-shape, inset(0 round var(--radius-lg)));
  border-radius: 0;
}

.cd-sp__text {
  gap: var(--space-3);
  display: grid;
}

.cd-sp__text h3 {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.01em;
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.cd-sp__text p {
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 760px) {
  .cd-sp__step {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cd-sp.is-panel {
  --sp-h: min(calc(var(--cd-vh) * .74), 640px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(32px, 6vw, 96px);
}

.cd-sp.is-panel .cd-sp__steps {
  gap: 0;
}

.cd-sp.is-panel .cd-sp__step {
  padding-block: calc(var(--cd-vh) * .22);
  opacity: .32;
  transition: opacity var(--dur-effects-slow) var(--ease-effects-slow);
  display: block;
}

.cd-sp.is-panel .cd-sp__step.is-active {
  opacity: 1;
}

.cd-sp__panel {
  top: max(var(--cd-sticky-top, 96px), calc(var(--cd-vh) / 2 - var(--sp-h) / 2));
  height: var(--sp-h);
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: sticky;
  overflow: hidden;
}

.cd-sp__panel .cd-sp__media {
  aspect-ratio: auto;
  clip-path: inset(100% 0 0);
  border-radius: 0;
  transition: none;
  position: absolute;
  inset: 0;
  scale: 1.08;
}

.cd-sp[data-dir="up"] .cd-sp__panel .cd-sp__media {
  clip-path: inset(0 0 100%);
}

.cd-sp__panel .cd-sp__media.is-prev {
  clip-path: inset(0);
  z-index: 1;
  scale: 1;
}

.cd-sp__panel .cd-sp__media.is-active {
  clip-path: inset(0);
  z-index: 2;
  transition: clip-path var(--dur-cinematic) var(--ease-out-expo), scale calc(var(--dur-cinematic) * 1.3) var(--ease-out-expo);
  scale: 1;
}

.cd-sp__count {
  z-index: 3;
  border-radius: var(--radius-full);
  background: var(--surface);
  padding: 7px 12px;
  position: absolute;
  bottom: 14px;
  right: 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-sp__count {
    background: color-mix(in oklab, var(--surface) 86%, transparent);
  }
}

.cd-sp__count {
  color: var(--ink);
  font: 500 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cd-sp.has-shapes .cd-sp__panel {
  width: min(100%, var(--sp-h));
  aspect-ratio: 1;
  height: auto;
  clip-path: var(--sp-shape, inset(0 round var(--radius-xl)));
  transition: clip-path var(--dur-spatial-slow) var(--ease-spatial-slow);
  background: none;
  border-radius: 0;
  overflow: visible;
}

.cd-sp.has-shapes .cd-sp__panel .cd-sp__media {
  clip-path: none;
  opacity: 0;
  scale: 1.06;
}

.cd-sp.has-shapes .cd-sp__panel .cd-sp__media.is-prev {
  opacity: 1;
  scale: 1;
}

.cd-sp.has-shapes .cd-sp__panel .cd-sp__media.is-active {
  opacity: 1;
  transition: opacity var(--dur-effects-slow) var(--ease-effects-slow), scale var(--dur-spatial-slow) var(--ease-spatial-slow);
  scale: 1;
}

.cd-sp.has-shapes .cd-sp__count {
  display: none;
}

.cd-ba {
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
  display: grid;
  position: relative;
}

.cd-ba__img {
  aspect-ratio: var(--ba-ratio, 4 / 3);
  border-radius: var(--radius-lg);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.cd-ba__img > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-ba__img[data-label]:after, .cd-ba__label {
  z-index: 3;
  border-radius: var(--radius-full);
  background: var(--surface);
  padding: 7px 12px;
  position: absolute;
  top: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ba__img[data-label]:after, .cd-ba__label {
    background: color-mix(in oklab, var(--surface) 88%, transparent);
  }
}

.cd-ba__img[data-label]:after, .cd-ba__label {
  color: var(--ink);
  font: 500 13px/1 var(--font-body);
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cd-ba__img[data-label]:after {
  content: attr(data-label);
  left: 12px;
}

.cd-ba.is-ready {
  aspect-ratio: var(--ba-ratio, 4 / 3);
  border-radius: var(--radius-lg);
  isolation: isolate;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
  transition: --ba-n var(--dur-spatial-fast) var(--ease-spatial-fast);
  display: block;
  overflow: hidden;
  container-type: size;
}

.cd-ba.is-ready.is-dragging {
  transition: none;
}

.cd-ba.is-ready .cd-ba__img {
  aspect-ratio: auto;
  border-radius: 0;
  position: absolute;
  inset: 0;
}

.cd-ba.is-ready .cd-ba__img[data-label]:after {
  display: none;
}

.cd-ba.is-ready .cd-ba__after {
  clip-path: inset(0 0 0 calc(var(--ba-n) * 1%));
}

.cd-ba__label--before {
  opacity: clamp(0, (var(--ba-n) - 10) / 12, 1);
  left: 12px;
}

.cd-ba__label--after {
  opacity: clamp(0, (90 - var(--ba-n)) / 12, 1);
  right: 12px;
}

.cd-ba__handle {
  z-index: 2;
  width: 0;
  translate: calc(var(--ba-n) * 1cqw) 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.cd-ba__handle:before {
  content: "";
  background: #ffffffeb;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  box-shadow: 0 0 14px #00000059;
}

.cd-ba__knob {
  background: var(--surface);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  translate: -50% -50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ba__knob {
    background: color-mix(in oklab, var(--surface) 90%, transparent);
  }
}

.cd-ba__knob {
  color: var(--ink);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: scale var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-ba__knob svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

.cd-ba.is-dragging .cd-ba__knob {
  scale: 1.12;
}

.cd-ba:has(.cd-ba__range:focus-visible) .cd-ba__knob {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
}

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

.cd-prox__w {
  white-space: nowrap;
  display: inline-block;
}

.cd-prox__c {
  font-variation-settings: "GRAD" calc(var(--cd-p) * 100), "ROND" calc(var(--cd-rond, 0) + var(--cd-p) * (100 - 2 * var(--cd-rond, 0))), "slnt" calc(var(--cd-p) * -10);
  scale: calc(1 + var(--cd-p) * .08);
  transform-origin: 50% 80%;
  display: inline-block;
}

.cd-prox.in .cd-prox__c {
  animation: cd-prox-wave 1.1s var(--ease-in-out) calc(var(--c, 0) * 45ms + .2s);
}

@keyframes cd-prox-wave {
  50% {
    --cd-p: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="4"], [data-motion="5"]) [data-scroll-flex] {
      animation: linear both cd-flex;
      animation-timeline: view();
      animation-range: entry 20% cover 55%;
    }

    @keyframes cd-flex {
      from {
        font-variation-settings: "ROND" 0;
        font-weight: 250;
        font-stretch: 75%;
      }

      to {
        font-variation-settings: "ROND" 100;
        font-weight: 850;
        font-stretch: 112%;
      }
    }
  }
}

@property --cd-wp {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.cd-nest {
  --cd-r-out: var(--radius-lg);
  --cd-pad: var(--space-4);
  --cd-r-in: max(0px, calc(var(--cd-r-out) - var(--cd-pad)));
  padding: var(--cd-pad);
  border-radius: var(--cd-r-out);
}

.cd-nest__in {
  border-radius: var(--cd-r-in);
}

.cd-roll {
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex;
}

.cd-roll__d {
  height: 1lh;
  display: inline-block;
  overflow: clip;
}

.cd-roll__s {
  translate: 0 calc(var(--v, 0) * -1lh);
  transition: translate var(--dur-cinematic) var(--ease-out-expo);
  transition-delay: calc(var(--k, 0) * 70ms);
  flex-direction: column;
  display: flex;
}

.cd-roll__s > span {
  text-align: center;
  height: 1lh;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="4"], [data-motion="5"]) .cd-marquee[data-scroll-link] {
      view-timeline: --cd-mq block;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-marquee[data-scroll-link] .cd-marquee__track {
      animation: linear both cd-mq-link;
      animation-timeline: --cd-mq;
      animation-range: cover;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-marquee--reverse[data-scroll-link] .cd-marquee__track {
      animation-name: cd-mq-link-rev;
    }

    :is([data-motion="4"], [data-motion="5"]) .cd-marquee[data-scroll-link]:hover .cd-marquee__track {
      animation-play-state: running;
    }

    @keyframes cd-mq-link {
      from {
        translate: 0;
      }

      to {
        translate: -40%;
      }
    }

    @keyframes cd-mq-link-rev {
      from {
        translate: -40%;
      }

      to {
        translate: 0;
      }
    }
  }
}

html:active-view-transition-type(circle)::view-transition-old(root) {
  animation: none;
}

html:active-view-transition-type(circle)::view-transition-new(root) {
  animation: var(--dur-slow) var(--ease-in-out) both cd-vt-circle;
}

@keyframes cd-vt-circle {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%));
  }

  to {
    clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%));
  }
}

.cd-ctext {
  width: var(--size, 136px);
  aspect-ratio: 1;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  flex: none;
  place-items: center;
  text-decoration: none;
  display: inline-grid;
  position: relative;
}

.cd-ctext__svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.cd-ctext__svg text {
  fill: currentColor;
  font-family: var(--font-body);
  letter-spacing: .08em;
  font-size: 9.5px;
  font-weight: 600;
}

.cd-ctext__mid {
  aspect-ratio: 1;
  background: var(--accent);
  width: 44%;
  color: var(--accent-ink);
  font-size: calc(var(--size, 136px) * .16);
  transition: scale var(--dur-spatial-fast) var(--ease-spatial-fast);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.cd-ctext__mid .cd-icon {
  vertical-align: 0;
  width: 1em;
  height: 1em;
}

@media (hover: hover) and (pointer: fine) {
  .cd-ctext:hover .cd-ctext__mid {
    scale: 1.1;
  }
}

.cd-ctext:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-ctext__svg {
      animation: linear both cd-ctext;
      animation-timeline: view();
      animation-range: cover;
    }

    @keyframes cd-ctext {
      from {
        rotate: -120deg;
      }

      to {
        rotate: 240deg;
      }
    }
  }
}

.cd-trail {
  isolation: isolate;
  position: relative;
  overflow: clip;
}

.cd-trail > :not(.cd-trail__layer) {
  z-index: 1;
  position: relative;
}

.cd-trail__layer {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.cd-trail__img {
  width: var(--trail-w, 170px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  opacity: 0;
  height: auto;
  box-shadow: var(--shadow-float);
  position: absolute;
  top: 0;
  left: 0;
}

.cd-dir {
  isolation: isolate;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.cd-dir > img, .cd-dir > .cd-ph {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 4 / 5);
  object-fit: cover;
  display: block;
}

.cd-dir__over {
  padding: var(--space-6);
  color: var(--bg);
  background: linear-gradient(to top, var(--scrim-from), var(--scrim-to) 70%);
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  display: flex;
  position: absolute;
  inset: 0;
}

.cd-dir__over > * {
  margin: 0;
}

.cd-dir__over strong {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  font-size: 22px;
  line-height: 1.15;
}

.cd-dir:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-dir__over {
    translate: var(--dx, 0) var(--dy, 100%);
    transition: translate var(--dur-base) var(--ease-out);
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-dir.is-snap .cd-dir__over {
    transition: none;
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) :is(.cd-dir.is-in, .cd-dir:focus-visible) .cd-dir__over {
    translate: 0;
  }
}

.cd-lens {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.cd-lens > :first-child {
  width: 100%;
  height: auto;
  display: block;
}

.cd-lens > .cd-ph {
  aspect-ratio: var(--ratio, 4 / 3);
}

.cd-lens__glass {
  width: var(--lens, 176px);
  height: var(--lens, 176px);
  pointer-events: none;
  box-shadow: 0 0 0 3px #ffffffe6, var(--shadow-float);
  opacity: 0;
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  scale: .5;
}

.cd-lens.is-on .cd-lens__glass {
  opacity: 1;
  scale: 1;
}

.cd-lens__glass > * {
  max-width: none;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.cd-pcols {
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  display: grid;
}

.cd-pcols__col {
  gap: var(--space-4);
  display: grid;
}

.cd-pcols__col > * {
  border-radius: var(--radius-lg);
  margin: 0;
  overflow: hidden;
}

.cd-pcols__col img, .cd-pcols__col .cd-ph {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-pcols {
      view-timeline: --cd-pc block;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-pcols__col {
      animation: linear both cd-pc-up;
      animation-timeline: --cd-pc;
      animation-range: cover;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-pcols__col:nth-child(2) {
      animation-name: cd-pc-down;
    }

    @keyframes cd-pc-up {
      from {
        translate: 0 calc(var(--cd-vh) * .06);
      }

      to {
        translate: 0 calc(var(--cd-vh) * -.06);
      }
    }

    @keyframes cd-pc-down {
      from {
        translate: 0 calc(var(--cd-vh) * -.12);
      }

      to {
        translate: 0 calc(var(--cd-vh) * .12);
      }
    }
  }
}

@media (max-width: 640px) {
  .cd-pcols {
    grid-template-columns: 1fr 1fr;
  }

  .cd-pcols__col {
    display: contents;
  }
}

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

.cd-flow > li {
  border-bottom: 1px solid var(--border);
}

.cd-flow__row {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.02em;
  padding: clamp(18px, 3vw, 28px) 0;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cd-flow__row:after {
  content: "→";
  font-family: var(--font-body);
  color: var(--ink-soft);
  transition: translate var(--dur-base) var(--ease-out);
  font-size: .5em;
}

@media (hover: hover) and (pointer: fine) {
  .cd-flow__row:hover:after {
    translate: 6px;
  }
}

.cd-flow__row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.cd-flow__band {
  z-index: 1;
  background: var(--accent);
  color: var(--accent-ink);
  pointer-events: none;
  clip-path: inset(0 0 100%);
  transition: clip-path var(--dur-base) var(--ease-out);
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cd-flow__row[data-from="bottom"] .cd-flow__band {
  clip-path: inset(100% 0 0);
}

.cd-flow__row.is-snap .cd-flow__band {
  transition: none;
}

.cd-flow__row.is-on .cd-flow__band {
  clip-path: inset(0);
}

.cd-flow__track {
  white-space: nowrap;
  animation: cd-marquee var(--flow-dur, 12s) linear infinite;
  flex: none;
  align-items: center;
  gap: .5em;
  padding-right: .5em;
  display: flex;
}

.cd-flow__pic {
  object-fit: cover;
  border-radius: 999px;
  flex: none;
  width: 1.9em;
  height: .9em;
  display: block;
}

.cd-tbar {
  border-radius: var(--radius-full);
  background: var(--surface);
  max-width: 100%;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-float);
  transition: width var(--dur-spatial) var(--ease-spatial);
  align-items: center;
  gap: 2px;
  padding: 4px;
  display: inline-flex;
  overflow: hidden;
}

.cd-tbar__btn {
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-effects) var(--ease-effects), scale var(--dur-fast) var(--ease-spring-snappy);
  background: none;
  border: 0;
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  font-size: 20px;
  display: grid;
}

.cd-tbar__btn:hover {
  background: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-tbar__btn:hover {
    background: color-mix(in oklab, var(--ink) 8%, transparent);
  }
}

.cd-tbar__btn:active {
  scale: .92;
}

.cd-tbar__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.cd-tbar__btn .cd-icon {
  vertical-align: 0;
  width: 1em;
  height: 1em;
}

.cd-tbar__panel {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: none;
}

.cd-tbar[data-open] > .cd-tbar__btn:not([data-tbar-close]), .cd-tbar:not([data-open]) > [data-tbar-close] {
  display: none;
}

.cd-tbar__panel.is-open {
  animation: cd-tbar-in var(--dur-spatial) var(--ease-spatial) both;
  display: flex;
}

@keyframes cd-tbar-in {
  from {
    opacity: 0;
    translate: 12px;
  }
}

.cd-tbar__input {
  width: min(64vw, 280px);
  min-height: 44px;
  color: var(--ink);
  font: inherit;
  background: none;
  border: 0;
  padding: 0 14px;
  font-size: 16px;
}

.cd-tbar__input:focus {
  outline: none;
}

.cd-tbar:has(.cd-tbar__input:focus-visible) {
  box-shadow: 0 0 0 2px var(--ink), var(--shadow-float);
}

.cd-tbar__panel .cd-chips {
  flex-wrap: nowrap;
}

.cd-phrot {
  min-width: 0;
  display: block;
  position: relative;
}

.cd-phrot > input {
  width: 100%;
}

.cd-phrot__layer {
  top: 0;
  bottom: 0;
  left: var(--ph-x, 14px);
  color: var(--ink-soft);
  pointer-events: none;
  transition: opacity var(--dur-effects) var(--ease-effects);
  position: absolute;
  right: 8px;
  overflow: hidden;
}

.cd-phrot__w {
  white-space: nowrap;
  transition: translate var(--dur-spatial-fast) var(--ease-spatial-fast), opacity var(--dur-effects) var(--ease-effects);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

.cd-phrot__w.is-pre {
  opacity: 0;
  transition: none;
  translate: 0 30%;
}

.cd-phrot__w.is-out {
  opacity: 0;
  translate: 0 -130%;
}

.cd-phrot.is-typing .cd-phrot__layer {
  opacity: 0;
}

.cd-vanish {
  top: 0;
  bottom: 0;
  left: var(--ph-x, 14px);
  white-space: pre;
  pointer-events: none;
  align-items: center;
  display: flex;
  position: absolute;
}

.cd-vanish > span {
  transition: translate .7s var(--ease-out), opacity .7s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: min(calc(var(--i, 0) * 16ms), var(--stagger-max, .5s));
  display: inline-block;
}

.cd-vanish.is-go > span {
  translate: calc(var(--dx, 0) * 1px) -1.1em;
  opacity: 0;
  filter: blur(4px);
}

.cd-bgroup {
  --cd-bg-pad: 18px;
  gap: 2px;
  max-width: 100%;
  display: inline-flex;
}

.cd-bgroup > button {
  min-height: 44px;
  padding: 0 var(--cd-bg-pad);
  background: var(--ink);
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-bgroup > button {
    background: color-mix(in oklab, var(--ink) 8%, var(--surface));
  }
}

.cd-bgroup > button {
  white-space: nowrap;
  color: var(--ink);
  font: 500 15px/1 var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-radius var(--dur-spatial-fast) var(--ease-spatial-fast), padding var(--dur-spatial-fast) var(--ease-spatial-fast), background-color var(--dur-effects) var(--ease-effects), color var(--dur-effects) var(--ease-effects);
}

.cd-bgroup > button:first-child {
  border-radius: var(--radius-full) 8px 8px var(--radius-full);
}

.cd-bgroup > button:last-child {
  border-radius: 8px var(--radius-full) var(--radius-full) 8px;
}

.cd-bgroup > button:only-child {
  border-radius: var(--radius-full);
}

.cd-bgroup > button[aria-pressed="true"] {
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--bg);
}

.cd-bgroup > button:active {
  padding-inline: calc(var(--cd-bg-pad) + 6px);
}

@media (max-width: 480px) {
  .cd-bgroup {
    --cd-bg-pad: 12px;
  }
}

.cd-bgroup > button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-bgroup .cd-icon {
  vertical-align: 0;
  width: 1.2em;
  height: 1.2em;
}

.cd-splitbtn {
  gap: 2px;
  display: inline-flex;
}

.cd-splitbtn > .cd-btn:first-child {
  border-radius: var(--radius-full) 8px 8px var(--radius-full);
}

.cd-splitbtn__more {
  border-radius: 8px var(--radius-full) var(--radius-full) 8px;
  background: var(--accent);
  width: 48px;
  min-height: 48px;
  color: var(--accent-ink);
  cursor: pointer;
  transition: border-radius var(--dur-spatial-fast) var(--ease-spatial-fast), scale var(--dur-fast) var(--ease-spring-snappy);
  border: 0;
  place-items: center;
  padding: 0;
  display: grid;
}

.cd-splitbtn__more:active {
  scale: .94;
}

.cd-splitbtn__more[aria-expanded="true"] {
  border-radius: var(--radius-full);
}

.cd-splitbtn__more .cd-icon {
  vertical-align: 0;
  width: 20px;
  height: 20px;
  transition: rotate var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-splitbtn__more[aria-expanded="true"] .cd-icon {
  rotate: 180deg;
}

.cd-splitbtn__more:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-popmenu {
  background: var(--surface);
  min-width: 220px;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-float);
  transform-origin: var(--pm-origin, top right);
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast), display var(--dur-effects) allow-discrete, overlay var(--dur-effects) allow-discrete;
  border: 0;
  border-radius: 18px;
  margin: 0;
  padding: 6px;
  position: fixed;
  inset: auto;
}

.cd-popmenu:not(:popover-open) {
  opacity: 0;
  scale: .94;
}

@starting-style {
  .cd-popmenu:popover-open {
    opacity: 0;
    scale: .94;
  }
}

.cd-popmenu a, .cd-popmenu button {
  width: 100%;
  min-height: 44px;
  color: inherit;
  font: 500 15px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  text-decoration: none;
  display: flex;
}

.cd-popmenu a:hover, .cd-popmenu button:hover, .cd-popmenu :focus-visible {
  background: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-popmenu a:hover, .cd-popmenu button:hover, .cd-popmenu :focus-visible {
    background: color-mix(in oklab, var(--ink) 7%, transparent);
  }
}

.cd-popmenu a:hover, .cd-popmenu button:hover, .cd-popmenu :focus-visible {
  outline: none;
}

.cd-banner {
  background: var(--banner-bg, var(--ink));
  color: var(--banner-ink, var(--bg));
  transition: grid-template-rows var(--dur-spatial) var(--ease-spatial-standard);
  grid-template-rows: 1fr;
  display: grid;
}

.cd-banner--accent {
  --banner-bg: var(--accent);
  --banner-ink: var(--accent-ink);
}

.cd-banner__in {
  min-height: 0;
  overflow: hidden;
}

.cd-banner__row {
  font: 500 14px/1.4 var(--font-body);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 56px;
  display: flex;
  position: relative;
}

.cd-banner__row a {
  color: inherit;
  text-underline-offset: .2em;
}

.cd-banner__close {
  width: 44px;
  height: 44px;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  top: 50%;
  right: 8px;
  translate: 0 -50%;
}

.cd-banner__close:hover {
  background: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-banner__close:hover {
    background: color-mix(in oklab, currentColor 14%, transparent);
  }
}

.cd-banner__close:focus-visible {
  outline-offset: -4px;
  outline: 2px solid;
}

.cd-banner__close .cd-icon, .cd-banner__close svg {
  fill: currentColor;
  vertical-align: 0;
  width: 18px;
  height: 18px;
}

.cd-banner.is-closed {
  grid-template-rows: 0fr;
}

a[data-preview] {
  color: inherit;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--accent);
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  a[data-preview] {
    -webkit-text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent);
    -webkit-text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent);
    text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent);
  }
}

a[data-preview] {
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}

.cd-lprev {
  background: var(--surface);
  width: 280px;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-float);
  transform-origin: var(--lp-origin, top center);
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast), display var(--dur-effects) allow-discrete, overlay var(--dur-effects) allow-discrete;
  border: 0;
  border-radius: 18px;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: auto;
  overflow: hidden;
}

.cd-lprev:not(:popover-open) {
  opacity: 0;
  scale: .94;
}

@starting-style {
  .cd-lprev:popover-open {
    opacity: 0;
    scale: .94;
  }
}

.cd-lprev__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.cd-lprev__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-lprev__body {
  gap: 4px;
  padding: 12px 16px 16px;
  font-size: 14px;
  line-height: 1.45;
  display: grid;
}

.cd-lprev__body strong {
  font-size: 15px;
}

.cd-lprev__body p {
  color: var(--ink-soft);
  margin: 0;
}

.cd-confetti {
  z-index: 2147483000;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

.cd-upload {
  gap: var(--space-3);
  display: grid;
}

.cd-upload__drop {
  border: 1.5px dashed var(--ink);
  justify-items: center;
  gap: 6px;
  padding: 28px 20px;
  display: grid;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-upload__drop {
    border: 1.5px dashed color-mix(in oklab, var(--ink) 28%, var(--border));
  }
}

.cd-upload__drop {
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-effects) var(--ease-effects), background-color var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast);
}

.cd-upload__drop:hover {
  border-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-upload__drop:hover {
    border-color: color-mix(in oklab, var(--ink) 50%, var(--border));
  }
}

.cd-upload__drop:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-upload__drop input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.cd-upload__drop strong {
  font-weight: 600;
}

.cd-upload__drop small {
  color: var(--ink-soft);
  font-size: 14px;
}

.cd-upload__drop .cd-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.cd-upload.is-over .cd-upload__drop {
  border-color: var(--accent);
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-upload.is-over .cd-upload__drop {
    background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  }
}

.cd-upload.is-over .cd-upload__drop {
  scale: 1.015;
}

.cd-upload__list {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cd-upload__list:empty {
  display: none;
}

.cd-upload__item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast);
  position: relative;
  overflow: hidden;
}

@starting-style {
  .cd-upload__item {
    opacity: 0;
    scale: .8;
  }
}

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

.cd-upload__item.is-file {
  place-items: center;
  padding: 10px;
  display: grid;
}

.cd-upload__name {
  text-align: center;
  word-break: break-word;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.3;
}

.cd-upload__remove {
  background: var(--surface);
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  position: absolute;
  top: 6px;
  right: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-upload__remove {
    background: color-mix(in oklab, var(--surface) 92%, transparent);
  }
}

.cd-upload__remove {
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 4px #0000002e;
}

.cd-upload__remove:before {
  content: "";
  position: absolute;
  inset: -4px;
}

.cd-upload__remove svg {
  fill: currentColor;
  width: 14px;
  height: 14px;
}

.cd-upload__remove:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.cd-screen {
  perspective: 1400px;
}

.cd-screen__frame {
  background: var(--ink);
  transform-origin: 50% 100%;
  border-radius: clamp(14px, 2.4vw, 24px);
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(8px, 1.4vw, 14px);
  box-shadow: 0 40px 80px -30px #00000073;
}

.cd-screen__frame > * {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: clamp(6px, 1vw, 12px);
  width: 100%;
  height: auto;
  display: block;
}

.cd-screen--phone .cd-screen__frame {
  border-radius: 44px;
  max-width: 300px;
  padding: 9px;
}

.cd-screen--phone .cd-screen__frame > * {
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: 0% 100%) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-screen__frame {
      animation: linear both cd-screen;
      animation-timeline: view();
      animation-range: entry cover 45%;
    }

    @keyframes cd-screen {
      from {
        rotate: x 28deg;
        scale: .88;
      }

      to {
        rotate: x 0deg;
        scale: 1;
      }
    }
  }
}

.cd-cstack {
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cd-cstack__card {
  gap: var(--space-3);
  min-height: 200px;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  display: grid;
}

.cd-cstack__card blockquote {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.3;
}

.cd-cstack__card :is(footer, figcaption) {
  color: var(--ink-soft);
  font-size: 14px;
}

.cd-cstack__card {
  margin: 0;
}

.cd-cstack.is-ready {
  touch-action: pan-y;
  gap: 0;
  padding-bottom: 42px;
  display: grid;
}

.cd-cstack.is-ready > li {
  translate: 0 calc(var(--i, 0) * 14px);
  scale: calc(1 - var(--i, 0) * .05);
  rotate: calc(var(--i, 0) * var(--tilt, 1.5deg));
  transform-origin: 50% 100%;
  transition: translate var(--dur-spatial) var(--ease-spatial), scale var(--dur-spatial) var(--ease-spatial), rotate var(--dur-spatial) var(--ease-spatial), opacity var(--dur-effects) var(--ease-effects);
  -webkit-user-select: none;
  user-select: none;
  grid-area: 1 / 1;
}

.cd-cstack.is-ready > li:nth-child(2n) {
  --tilt: -1.5deg;
}

.cd-cstack.is-ready > li.is-hidden {
  opacity: 0;
}

.cd-cstack.is-ready > li.is-top {
  cursor: grab;
}

.cd-cstack.is-ready > li.is-drag {
  cursor: grabbing;
  transition: none;
}

.cd-cstack.is-ready > li.is-snap {
  transition: none;
}

.cd-cstack.is-ready .cd-cstack__card {
  box-shadow: 0 0 0 1px var(--border), 0 18px 40px -24px #00000059;
}

.cd-cstack__nav {
  align-items: center;
  gap: 10px;
  display: flex;
}

.cd-cstack:not(.is-ready) ~ .cd-cstack__nav {
  display: none;
}

.cd-cstack__nav button {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  transition: scale var(--dur-fast) var(--ease-spring-snappy);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
}

.cd-cstack__nav button:active {
  scale: .92;
}

.cd-cstack__nav button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-cstack__nav svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.cd-cstack__count {
  min-width: 4ch;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.cd-focus {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

@media (hover: hover) and (pointer: fine) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-focus > * {
    transition: filter var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-focus:has( > :hover) > :not(:hover) {
    filter: blur(4px) saturate(.7);
    opacity: .72;
    scale: .98;
  }
}

:is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-focus:has(:focus-visible) > :not(:focus-visible):not(:has(:focus-visible)) {
  filter: blur(4px) saturate(.7);
  opacity: .72;
}

.cd-bgx {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.cd-bgx__media {
  z-index: 1;
  max-width: var(--bgx-max, 1200px);
  margin-inline: auto;
  position: relative;
}

.cd-bgx__media > * {
  width: 100%;
  height: auto;
  aspect-ratio: var(--bgx-ratio, 16 / 9);
  object-fit: cover;
  display: block;
}

.cd-bgx:before, .cd-bgx:after {
  content: "";
  z-index: 0;
  width: min(var(--bgx-max, 1200px), 100%);
  background: var(--bgx) center / cover;
  filter: blur(26px) saturate(1.15);
  position: absolute;
  top: 0;
  bottom: 0;
  scale: -1 1;
}

.cd-bgx:before {
  right: calc(50% + min(var(--bgx-max, 1200px), 100%) / 2 - 48px);
  -webkit-mask: linear-gradient(to right, #000 40%, #0000);
  mask: linear-gradient(to right, #000 40%, #0000);
}

.cd-bgx:after {
  left: calc(50% + min(var(--bgx-max, 1200px), 100%) / 2 - 48px);
  -webkit-mask: linear-gradient(to left, #000 40%, #0000);
  mask: linear-gradient(to left, #000 40%, #0000);
}

.cd-wave {
  --p: 0;
  height: 14px;
  display: block;
  position: relative;
}

.cd-wave__track {
  top: 50%;
  right: 0;
  left: calc(var(--p) * 100% + 8px);
  background: var(--accent);
  border-radius: 4px;
  height: 4px;
  position: absolute;
  translate: 0 -50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-wave__track {
    background: color-mix(in oklab, var(--accent) 24%, var(--surface));
  }
}

.cd-wave__track:after {
  content: "";
  background: var(--accent);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 0;
  right: 0;
}

.cd-wave__active {
  clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cd-wave__active:before {
  content: "";
  background: var(--accent);
  position: absolute;
  inset: 0 -40px 0 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M-5 7 Q0 12 5 7 T15 7 T25 7 T35 7 T45 7' fill='none' stroke='black' stroke-width='3.6'/%3E%3C/svg%3E") 0 / 40px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M-5 7 Q0 12 5 7 T15 7 T25 7 T35 7 T45 7' fill='none' stroke='black' stroke-width='3.6'/%3E%3C/svg%3E") 0 / 40px 100% repeat-x;
}

.cd-wave--indet {
  --p: 1;
  border-radius: 4px;
  overflow: hidden;
}

.cd-wave--indet .cd-wave__track {
  display: none;
}

.cd-wave--indet .cd-wave__active {
  clip-path: inset(0 62% 0 0 round 4px);
}

.cd-wave[data-scroll] {
  --p: var(--cd-wp);
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-wave__active:before {
    animation: 1.1s linear infinite cd-wave-phase;
  }

  .cd-wave--indet .cd-wave__active {
    animation: cd-wave-indet 1.8s var(--ease-in-out) infinite;
  }

  @keyframes cd-wave-phase {
    to {
      translate: -40px;
    }
  }

  @keyframes cd-wave-indet {
    from {
      translate: -40%;
    }

    to {
      translate: 100%;
    }
  }
}

@keyframes cd-wave-breathe {
  from {
    opacity: .35;
  }
}

@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
  .cd-wave[data-scroll] {
    animation: linear both cd-wave-read;
    animation-timeline: scroll();
  }

  @keyframes cd-wave-read {
    from {
      --cd-wp: 0;
    }

    to {
      --cd-wp: 1;
    }
  }
}

.cd-wall {
  --wall-cols: 3;
  columns: var(--wall-cols);
  column-gap: var(--space-4);
}

.cd-wall__item {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-md);
  break-inside: avoid;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  display: block;
  overflow: hidden;
}

@media (max-width: 640px) {
  .cd-wall {
    --wall-cols: 2;
    column-gap: var(--space-3);
  }

  .cd-wall__item {
    margin-bottom: var(--space-3);
  }
}

.cd-wall__item > img, .cd-wall__item > .cd-ph {
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, auto);
  object-fit: cover;
  transition: scale var(--dur-base) var(--ease-out);
  display: block;
}

.cd-wall__item > .cd-ph {
  aspect-ratio: var(--r, 4 / 5);
}

.cd-wall__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .cd-wall__item:hover > * {
    scale: 1.04;
  }
}

.cd-wall.is-live {
  height: var(--wall-h, 100svh);
  columns: auto;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: clip;
}

.cd-wall.is-live.is-drag {
  cursor: grabbing;
}

.cd-wall.is-live .cd-wall__item {
  width: var(--wall-w, 30%);
  will-change: translate;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.cd-wall.is-live .cd-wall__item > * {
  scale: 1.16;
}

@media (hover: hover) and (pointer: fine) {
  .cd-wall.is-live .cd-wall__item:hover > * {
    scale: 1.2;
  }
}

.cd-wall.is-live .cd-wall__item:focus-visible {
  outline: none;
}

.cd-wall.is-live .cd-wall__item:focus-visible:after {
  content: "";
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--bg);
  position: absolute;
  inset: 0;
}

.cd-walld {
  background: var(--bg);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  color: var(--ink);
  overscroll-behavior: contain;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.cd-walld::backdrop {
  background: none;
}

.cd-walld__in {
  --mh: calc(100svh - 2 * var(--space-8));
  gap: var(--space-8);
  min-height: 100%;
  padding: var(--space-8);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: end;
  display: grid;
  position: relative;
}

.cd-walld__media {
  height: var(--mh);
  place-items: center;
  margin: 0;
  display: grid;
}

.cd-walld__media > img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--mh);
  border-radius: var(--radius-md);
  display: block;
}

.cd-walld__media > .cd-ph {
  width: min(100%, calc(var(--mh) * var(--rn, .8)));
  height: auto;
  aspect-ratio: var(--rn, .8);
  border-radius: var(--radius-md);
}

.cd-walld__text {
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  display: grid;
}

.cd-walld__count {
  font: 500 13px/1 var(--font-body);
  letter-spacing: .08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.cd-walld__title {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
}

.cd-walld__desc {
  color: var(--ink-soft);
  text-wrap: pretty;
  margin: 0;
}

.cd-walld__nav {
  margin-top: var(--space-2);
  gap: 10px;
  display: flex;
}

.cd-walld__nav button, .cd-walld__close {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  transition: scale var(--dur-fast) var(--ease-spring-snappy);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
}

.cd-walld__nav button:active, .cd-walld__close:active {
  scale: .92;
}

.cd-walld__nav svg, .cd-walld__close svg {
  fill: currentColor;
  width: 18px;
  height: 18px;
}

.cd-walld__close {
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  position: absolute;
}

.cd-walld :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .cd-walld__in {
    --mh: 58svh;
    align-content: start;
    align-items: start;
    gap: var(--space-4);
    padding: 68px var(--space-4) var(--space-6);
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-walld.is-plain[open] {
    animation: cd-walld-in var(--dur-base) var(--ease-out);
  }

  @keyframes cd-walld-in {
    from {
      opacity: 0;
      scale: .98;
    }
  }
}

.cd-dots {
  --k: 1;
  --dot: calc(5px * var(--k));
  --gap: calc(3px * var(--k));
  --dur: 1.4s;
  grid-template-columns: repeat(5, var(--dot));
  gap: var(--gap);
  color: var(--accent);
  vertical-align: middle;
  display: inline-grid;
}

.cd-dots--sm {
  --k: .6;
}

.cd-dots--lg {
  --k: 1.6;
}

.cd-dots > i {
  width: var(--dot);
  height: var(--dot);
  opacity: .16;
  background: currentColor;
  border-radius: 50%;
}

.cd-dots > i[data-off] {
  visibility: hidden;
}

.cd-dots[data-dm] {
  grid-template-columns: repeat(var(--n, 5), var(--dot));
}

.cd-dots[data-dm="triangle"] {
  --n: 7;
  --dot: calc(5px * var(--k));
  --gap: calc(1.25px * var(--k));
}

.cd-dots[data-dm="3x3"] {
  --n: 3;
  --dot: calc(6px * var(--k));
  --gap: calc(2px * var(--k));
}

.cd-dots[data-dm="hex"] {
  --dot: calc(6px * var(--k));
  --gap: calc(2.4px * var(--k));
  width: calc(var(--dot) * 5 + var(--gap) * 4);
  height: calc(var(--dot) + (var(--dot) + var(--gap)) * 3.4641);
  display: inline-block;
  position: relative;
}

.cd-dots[data-dm="hex"] > i {
  left: calc(var(--x) * (var(--dot) + var(--gap)));
  top: calc(var(--y) * (var(--dot) + var(--gap)));
  position: absolute;
}

.cd-dots:empty {
  width: calc(var(--dot) * 5 + var(--gap) * 4);
  aspect-ratio: 1;
  background: radial-gradient(circle, currentColor 0 calc(var(--dot) / 2), transparent calc(var(--dot) / 2 + .5px)) 0 0 / calc(var(--dot) + var(--gap)) calc(var(--dot) + var(--gap));
  opacity: .45;
}

@media (prefers-reduced-motion: no-preference) {
  .cd-dots > i {
    --t: calc((var(--r) + var(--c)) / 8);
    animation: cd-dot var(--dur) linear infinite;
    animation-delay: calc((var(--t) - 2) * var(--dur));
  }

  .cd-dots[data-dots="anello"] > i {
    --t: var(--d);
  }

  .cd-dots[data-dots="spirale"] > i {
    --t: var(--a);
  }

  .cd-dots[data-dots="pioggia"] > i {
    --t: calc(var(--r) / 5 + var(--p));
  }

  .cd-dots[data-dots="scansione"] > i {
    --t: calc(var(--r) / 5);
  }

  .cd-dots[data-dots="cuore"] > i {
    opacity: .1;
    animation: none;
  }

  .cd-dots[data-dots="cuore"] > i[data-on] {
    animation: 1.2s ease-in-out infinite cd-dot-beat;
    animation-delay: calc(var(--d) * .11s);
  }

  .cd-dots[data-dm] > i {
    animation: none;
  }

  @keyframes cd-dot {
    0%, 100% {
      opacity: .16;
    }

    10% {
      opacity: 1;
    }

    45% {
      opacity: .3;
    }
  }

  @keyframes cd-dot-beat {
    0%, 60%, 100% {
      opacity: .35;
      scale: .8;
    }

    15% {
      opacity: 1;
      scale: 1.1;
    }

    30% {
      opacity: .7;
      scale: .95;
    }

    42% {
      opacity: 1;
      scale: 1.05;
    }
  }
}

@keyframes cd-dots-breathe {
  from {
    opacity: .4;
  }
}

.cd-open {
  color: var(--ink);
  font: 500 15px/1.4 var(--font-body);
  align-items: center;
  gap: 10px;
  margin: 0;
  display: inline-flex;
}

.cd-open__dot {
  background: var(--ink-soft);
  border-radius: 50%;
  flex: none;
  width: 10px;
  height: 10px;
  position: relative;
}

.cd-open__dot:after {
  content: "";
  background: inherit;
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  inset: -5px;
}

.cd-open.is-open .cd-open__dot {
  background: var(--success);
}

.cd-open:is(.is-closing, .is-holiday) .cd-open__dot {
  background: var(--warning);
}

.cd-open__text strong {
  font-weight: 650;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-open.is-open .cd-open__dot:after {
    animation: cd-open-halo 1.6s var(--ease-out) 3;
  }

  @keyframes cd-open-halo {
    from {
      opacity: .45;
      scale: .6;
    }

    to {
      opacity: 0;
      scale: 1.7;
    }
  }
}

:where(.cd-hit) {
  position: relative;
}

.cd-hit:after {
  content: "";
  inset: calc(var(--hit-y, var(--hit, 8px)) * -1) calc(var(--hit-x, var(--hit, 8px)) * -1);
  border-radius: inherit;
  position: absolute;
}

[data-hit-debug] .cd-hit:after {
  background: var(--danger);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-hit-debug] .cd-hit:after {
    background: color-mix(in oklab, var(--danger) 14%, transparent);
  }
}

[data-hit-debug] .cd-hit:after {
  outline: 1px dashed var(--danger);
}

[data-hit-debug] [data-hit-small] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.cd-swap {
  --swap-s: .4;
  --swap-in: 0deg;
  --swap-out: 0deg;
  --swap-0: 0deg;
  --swap-b: 0px;
  place-items: center;
  display: inline-grid;
}

.cd-swap--rotate {
  --swap-s: .6;
  --swap-in: -90deg;
  --swap-out: 90deg;
}

.cd-swap--blur {
  --swap-s: .85;
  --swap-b: 5px;
}

.cd-swap--flip {
  --swap-s: 1;
  --swap-in: x -90deg;
  --swap-out: x 90deg;
  --swap-0: x 0deg;
  perspective: 160px;
}

.cd-swap > [data-swap] {
  transition: opacity var(--dur-effects) var(--ease-effects), scale var(--dur-spatial-fast) var(--ease-spatial-fast), rotate var(--dur-spatial-fast) var(--ease-spatial-fast), filter var(--dur-effects) var(--ease-effects);
  grid-area: 1 / 1;
}

.cd-swap > [data-swap="on"] {
  opacity: 0;
  scale: var(--swap-s);
  rotate: var(--swap-in);
  filter: blur(var(--swap-b));
}

:is(.cd-swap[aria-pressed="true"], .cd-swap[aria-expanded="true"], .cd-swap.is-on) > [data-swap="on"] {
  opacity: 1;
  scale: 1;
  rotate: var(--swap-0);
  filter: blur();
}

:is(.cd-swap[aria-pressed="true"], .cd-swap[aria-expanded="true"], .cd-swap.is-on) > [data-swap="off"] {
  opacity: 0;
  scale: var(--swap-s);
  rotate: var(--swap-out);
  filter: blur(var(--swap-b));
}

.cd-sign {
  color: var(--ink);
  margin: 0;
}

.cd-sign svg {
  width: min(100%, var(--sign-w, 260px));
  height: auto;
  display: block;
  overflow: visible;
}

.cd-sign path, .cd-sign__pad path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sign-stroke, 2.4);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cd-sign figcaption {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: 14px;
}

.cd-sign.is-ready path {
  opacity: 0;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1px;
}

.cd-sign.is-ready.in path {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0s linear var(--d, 0s), stroke-dashoffset var(--t, .6s) cubic-bezier(.45, .05, .4, 1) var(--d, 0s);
}

.cd-sign__pad {
  border: 1.5px dashed var(--ink);
  width: 100%;
  height: auto;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-sign__pad {
    border: 1.5px dashed color-mix(in oklab, var(--ink) 28%, var(--border));
  }
}

.cd-sign__pad {
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  touch-action: none;
  cursor: crosshair;
}

.cd-shader {
  isolation: isolate;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.cd-shader:not(.is-live):before {
  content: "";
  z-index: -1;
  background: radial-gradient(110% 80% at 12% 8%, var(--accent), transparent 62%), radial-gradient(90% 70% at 92% 96%, var(--accent), transparent 64%), radial-gradient(70% 60% at 70% 20%, var(--surface), transparent 70%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-shader:not(.is-live):before {
    background: radial-gradient(110% 80% at 12% 8%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 62%), radial-gradient(90% 70% at 92% 96%, color-mix(in oklab, var(--accent) 35%, var(--ink) 20%), transparent 64%), radial-gradient(70% 60% at 70% 20%, color-mix(in oklab, var(--surface) 80%, transparent), transparent 70%);
  }
}

.cd-shader:not(.is-live):after {
  content: "";
  z-index: -1;
  opacity: .18;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
}

.cd-shader[data-shader="retino"]:not(.is-live):before {
  background: radial-gradient(circle, var(--accent) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(160deg, var(--bg) 30%, var(--accent));
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-shader[data-shader="retino"]:not(.is-live):before {
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 70%, transparent) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(160deg, var(--bg) 30%, color-mix(in oklab, var(--accent) 20%, var(--bg)));
  }
}

.cd-shader[data-shader="retino"]:not(.is-live):before {
  -webkit-mask: radial-gradient(120% 90% at 80% 20%, #000 20%, #0000 75%);
  mask: radial-gradient(120% 90% at 80% 20%, #000 20%, #0000 75%);
}

.cd-night {
  --bg: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-night {
    --bg: color-mix(in oklab, var(--accent) 7%, #06060a);
  }
}

.cd-night {
  --surface: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-night {
    --surface: color-mix(in oklab, var(--accent) 12%, #0d0d14);
  }
}

.cd-night {
  --ink: #f3f2f7;
  --ink-soft: #a9a8b7;
  --border: #ffffff1f;
  --neon: oklch(from var(--accent) max(l, .74) max(c, .15) h);
  background-color: var(--bg);
  color: var(--ink);
}

.cd-cut {
  --cut: 22px;
  --cut-line: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-cut {
    --cut-line: color-mix(in oklab, var(--ink) 22%, transparent);
  }
}

.cd-cut {
  --cut-fill: var(--surface);
  --cut-glow: var(--neon, var(--accent));
  --cut-glow-2: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-cut {
    --cut-glow-2: color-mix(in oklab, var(--accent) 45%, var(--ink));
  }
}

.cd-cut {
  --cut-glow-o: .2;
  --cut-tab-w: 10em;
  --cut-tab-h: 2.4em;
  isolation: isolate;
  color: var(--ink);
  text-decoration: none;
  display: block;
  position: relative;
}

.cd-cut:before {
  content: "";
  z-index: -1;
  background: linear-gradient(135deg, var(--cut-glow), var(--cut-glow-2));
  filter: blur(34px);
  opacity: var(--cut-glow-o);
  pointer-events: none;
  transition: opacity var(--dur-effects) var(--ease-effects), inset var(--dur-spatial) var(--ease-spatial);
  position: absolute;
  inset: 12% 8%;
}

.cd-cut__in {
  --p: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  gap: var(--space-3);
  box-sizing: border-box;
  height: 100%;
  padding: var(--space-6);
  background-color: var(--cut-line);
  clip-path: var(--p);
  transition: background-color var(--dur-effects) var(--ease-effects);
  align-content: start;
  display: grid;
  position: relative;
}

.cd-cut__in:before {
  content: "";
  z-index: -1;
  background: var(--cut-fill);
  clip-path: var(--p);
  position: absolute;
  inset: 1.5px;
}

.cd-cut--tab .cd-cut__in {
  --p: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut-tab-h)),
    calc(100% - var(--cut-tab-w)) calc(100% - var(--cut-tab-h)), calc(100% - var(--cut-tab-w) - var(--cut-tab-h) * .9) 100%, 0 100%);
  padding-bottom: calc(var(--space-6) + var(--cut-tab-h) * .4);
}

.cd-cut__tab {
  width: calc(var(--cut-tab-w) - .6em);
  height: var(--cut-tab-h);
  font: 500 12px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5em;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
}

.cd-cut__tab b {
  color: var(--cut-glow);
  font-weight: 600;
}

.cd-cut__icon {
  width: 44px;
  height: 44px;
  color: var(--cut-glow);
  background: var(--cut-glow);
  place-items: center;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-cut__icon {
    background: color-mix(in oklab, var(--cut-glow) 14%, transparent);
  }
}

.cd-cut__icon {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.cd-cut__icon .cd-icon {
  width: 22px;
  height: 22px;
}

.cd-cut__media {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cd-cut__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: scale var(--dur-spatial-slow) var(--ease-spatial);
  display: block;
}

.cd-cut h3 {
  font: var(--cd-display-weight) 22px/1.15 var(--font-display);
  margin: 0;
}

.cd-cut p {
  color: var(--ink-soft);
  margin: 0;
}

.cd-cut--neon {
  --cut-line: var(--neon, var(--accent));
  --cut-fill: var(--bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-cut--neon {
    --cut-fill: color-mix(in oklab, var(--bg) 90%, var(--accent));
  }
}

.cd-cut--neon {
  --cut-glow-o: .5;
  filter: drop-shadow(0 0 5px var(--cut-glow)) drop-shadow(0 0 18px var(--cut-glow));
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-cut--neon {
    filter: drop-shadow(0 0 5px color-mix(in oklab, var(--cut-glow) 60%, transparent)) drop-shadow(0 0 18px color-mix(in oklab, var(--cut-glow) 30%, transparent));
  }
}

a.cd-cut:focus-visible {
  outline: none;
}

a.cd-cut:focus-visible .cd-cut__in {
  background-color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-cut:is(a, [data-hover]):hover {
    --cut-glow-o: .6;
  }

  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-cut:is(a, [data-hover]):hover:before {
    inset: 2% 0;
  }

  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-cut:is(a, [data-hover]):hover .cd-cut__in {
    background-color: var(--cut-glow);
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-cut:is(a, [data-hover]):hover .cd-cut__media > * {
    scale: 1.05;
  }
}

.cd-circuit {
  --fx: var(--neon, var(--accent));
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.cd-circuit__svg {
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  color: var(--fx);
  filter: drop-shadow(0 0 3px);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-circuit__svg {
    filter: drop-shadow(0 0 3px color-mix(in oklab, currentColor 70%, transparent));
  }
}

.cd-circuit__svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cd-circuit__svg .cd-circuit__trace {
  opacity: .42;
}

.cd-circuit__svg .cd-circuit__pulse {
  stroke-width: 2.5px;
  stroke-dasharray: 18 var(--len);
  stroke-dashoffset: 18px;
  opacity: 0;
}

.cd-circuit__svg circle, .cd-circuit__svg rect {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 1.5px;
}

.cd-circuit__svg .is-on {
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-circuit[data-pulse] .cd-circuit__pulse {
    opacity: 1;
    animation: cd-circuit-run var(--t, 3s) linear infinite;
    animation-delay: var(--d, 0s);
  }

  @keyframes cd-circuit-run {
    from {
      stroke-dashoffset: 18px;
    }

    to {
      stroke-dashoffset: calc(-1 * var(--len));
    }
  }
}

.cd-gridfloor {
  --grid: 56px;
  --grid-line: 2px;
  --horizon: 58%;
  isolation: isolate;
  --fx: var(--neon, var(--accent));
  background: var(--bg);
  perspective: 420px;
  perspective-origin: 50% var(--horizon);
  position: relative;
  overflow: hidden;
}

.cd-gridfloor[data-scene="room"] {
  --horizon: 50%;
}

.cd-gridfloor__plane {
  left: -80%;
  right: -80%;
  top: var(--horizon);
  z-index: -2;
  transform-origin: 50% 0;
  background-image: linear-gradient(currentColor var(--grid-line), transparent var(--grid-line)), linear-gradient(90deg, currentColor var(--grid-line), transparent var(--grid-line));
  background-size: var(--grid) var(--grid);
  opacity: .75;
  height: 220%;
  color: var(--fx);
  pointer-events: none;
  background-position: 50% 0;
  position: absolute;
  transform: rotateX(80deg);
  -webkit-mask: linear-gradient(#0000, #000 18%);
  mask: linear-gradient(#0000, #000 18%);
}

.cd-gridfloor__plane--top {
  top: auto;
  bottom: calc(100% - var(--horizon));
  transform-origin: 50% 100%;
  transform: rotateX(-80deg);
  -webkit-mask: linear-gradient(to top, #0000, #000 18%);
  mask: linear-gradient(to top, #0000, #000 18%);
}

.cd-gridfloor:after {
  content: "";
  left: 0;
  right: 0;
  top: var(--horizon);
  z-index: -1;
  background: var(--fx);
  height: 2px;
  box-shadow: 0 0 12px var(--fx), 0 0 42px var(--fx);
  pointer-events: none;
  margin-top: -1px;
  position: absolute;
}

.cd-gridfloor:before {
  content: "";
  z-index: -3;
  background: radial-gradient(70% 34% at 50% var(--horizon), var(--fx), transparent 70%);
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-gridfloor:before {
    background: radial-gradient(70% 34% at 50% var(--horizon), color-mix(in oklab, var(--fx) 34%, transparent), transparent 70%);
  }
}

.cd-gridfloor:before {
  pointer-events: none;
}

.cd-gridfloor__sun {
  left: 50%;
  bottom: calc(100% - var(--horizon));
  z-index: -2;
  aspect-ratio: 1;
  background: linear-gradient(to bottom, var(--warning), var(--fx) 70%);
  border-radius: 50%;
  width: min(42vw, 340px);
  position: absolute;
  translate: -50% 50%;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-gridfloor__sun {
    background: linear-gradient(to bottom, color-mix(in oklab, var(--warning) 80%, white), var(--fx) 70%);
  }
}

.cd-gridfloor__sun {
  -webkit-mask-composite: source-in;
  box-shadow: 0 0 60px var(--fx);
  -webkit-mask-composite: source-in;
  -webkit-mask-source-type: auto, auto;
  -webkit-mask-image: linear-gradient(#000 50%, #0000 50%), repeating-linear-gradient(#000 0 14px, #0000 14px 20px);
  mask-image: linear-gradient(#000 50%, #0000 50%), repeating-linear-gradient(#000 0 14px, #0000 14px 20px);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: border-box, border-box;
  mask-clip: border-box, border-box;
  -webkit-mask-origin: border-box, border-box;
  mask-origin: border-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-gridfloor__sun {
    box-shadow: 0 0 60px color-mix(in oklab, var(--fx) 50%, transparent);
  }
}

.cd-gridfloor__sun {
  pointer-events: none;
}

.cd-gridfloor > :not([class^="cd-gridfloor__"]) {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-gridfloor__plane {
    animation: cd-grid-run var(--grid-dur, 1.2s) linear infinite;
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-gridfloor__plane--top {
    animation-direction: reverse;
  }

  @keyframes cd-grid-run {
    to {
      background-position: 50% var(--grid);
    }
  }
}

.cd-neonlines {
  --nl-h: calc(var(--cd-vh) * 4.2);
  --fx: var(--neon, var(--accent));
  position: relative;
}

.cd-neonlines.is-live {
  height: var(--nl-h);
}

.cd-neonlines__stage {
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-6);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 24rem);
  display: grid;
  position: relative;
}

.cd-neonlines.is-live .cd-neonlines__stage {
  height: var(--cd-vh);
  position: sticky;
  top: 0;
  overflow: hidden;
}

.cd-neonlines__svg {
  width: 100%;
  max-height: calc(var(--cd-vh) * .78);
  color: var(--fx);
  filter: drop-shadow(0 0 3px) drop-shadow(0 0 12px);
  overflow: visible;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-neonlines__svg {
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 12px color-mix(in oklab, currentColor 55%, transparent));
  }
}

.cd-neonlines__svg :is(path, line, polyline, polygon, rect, circle, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cd-neonlines__svg [data-tone="2"] {
  stroke: var(--nl-2, var(--warning));
}

.cd-neonlines__svg [data-tone="3"] {
  stroke: var(--nl-3, var(--ink));
}

.cd-neonlines.is-live [data-chapter] :is(path, line, polyline, polygon, rect, circle, ellipse) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: var(--o, 1);
}

.cd-neonlines__steps {
  color: var(--ink);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}

.cd-neonlines__steps > li {
  gap: var(--space-3);
  display: grid;
}

.cd-neonlines.is-live .cd-neonlines__steps > li {
  opacity: 0;
  transition: opacity var(--dur-effects) var(--ease-effects), translate var(--dur-spatial) var(--ease-spatial);
  pointer-events: none;
  grid-area: 1 / 1;
  translate: 0 18px;
}

.cd-neonlines.is-live .cd-neonlines__steps > li.is-on {
  opacity: 1;
  pointer-events: auto;
  translate: 0;
}

.cd-neonlines:not(.is-live) .cd-neonlines__steps {
  gap: var(--space-8);
}

.cd-neonlines__count {
  letter-spacing: .08em;
  color: var(--neon, var(--accent));
  font: 500 13px / 1 JetBrains Mono, ui-monospace, monospace;
}

.cd-neonlines__steps h3 {
  font: var(--cd-display-weight) clamp(24px, 3vw, 36px)/1.1 var(--font-display);
  margin: 0;
}

.cd-neonlines__steps p {
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 760px) {
  .cd-neonlines__stage {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .cd-neonlines__svg {
    max-height: calc(var(--cd-vh) * .46);
  }
}

.cd-preloader {
  z-index: 1000;
  align-content: center;
  place-items: center;
  gap: var(--space-4);
  background: var(--pre-bg, var(--ink));
  color: var(--pre-ink, var(--bg));
  animation: cd-pre-auto .6s var(--ease-drawer) 2.8s forwards;
  display: grid;
  position: fixed;
  inset: 0;
}

@keyframes cd-pre-auto {
  to {
    clip-path: inset(0 0 100%);
    visibility: hidden;
  }
}

.cd-preloader.is-out {
  clip-path: inset(0 0 100%);
  transition: clip-path .75s var(--ease-drawer);
  animation: none;
}

.cd-pre-seen .cd-preloader, [data-motion="1"] .cd-preloader {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cd-preloader {
    display: none;
  }
}

.cd-preloader__logo {
  font: var(--cd-display-weight) clamp(28px, 6vw, 64px)/1.05 var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  overflow: clip;
}

.cd-preloader__logo > span {
  animation: cd-pre-logo .9s var(--ease-out-expo) .1s both;
  display: block;
}

@keyframes cd-pre-logo {
  from {
    translate: 0 110%;
  }
}

.cd-preloader.is-leaving .cd-preloader__logo > span {
  transition: translate .5s var(--ease-in-out);
  translate: 0 -110%;
}

.cd-preloader__count {
  font: var(--cd-display-weight) clamp(64px, 18vw, 200px)/.9 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  margin: 0;
}

.cd-preloader__bar {
  background: currentColor;
  width: min(240px, 60vw);
  height: 2px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-preloader__bar {
    background: color-mix(in oklab, currentColor 25%, transparent);
  }
}

.cd-preloader__bar {
  overflow: hidden;
}

.cd-preloader__bar > i {
  transform-origin: 0;
  height: 100%;
  scale: var(--pre-p, 0) 1;
  background: currentColor;
  display: block;
}

.cd-cutout {
  isolation: isolate;
  padding-top: var(--space-8);
  place-items: center;
  display: grid;
  position: relative;
  overflow: clip;
  container-type: inline-size;
}

.cd-cutout > * {
  grid-area: 1 / 1;
}

.cd-cutout__title {
  z-index: 0;
  font: var(--cd-display-weight) 18.5cqi/.82 var(--font-display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: start;
  margin: 0;
}

.cd-cutout__subject {
  z-index: 1;
  filter: drop-shadow(0 28px 36px #0003);
  align-self: end;
  width: min(58cqi, 720px);
  height: auto;
  margin-top: 7cqi;
}

.cd-cutout__aside {
  z-index: 2;
  max-width: 24ch;
  margin: 0 0 var(--space-8) var(--space-6);
  place-self: end start;
  font-size: 14px;
  line-height: 1.45;
}

.cd-cutout__aside--end {
  margin: 0 var(--space-6) var(--space-8) 0;
  text-align: right;
  justify-self: end;
}

@container (max-width: 620px) {
  .cd-cutout__aside, .cd-cutout__aside--end {
    margin: var(--space-3) var(--space-6) 0;
    text-align: left;
    grid-area: auto;
    justify-self: stretch;
  }

  .cd-cutout__aside:last-child {
    margin-bottom: var(--space-6);
  }
}

.cd-bgshift {
  background-color: var(--bgshift, var(--bg));
  color: var(--bgshift-ink, var(--ink));
  transition: background-color var(--dur-slow) var(--ease-in-out), color var(--dur-slow) var(--ease-in-out);
}

.cd-exploded {
  --ex-h: calc(var(--cd-vh) * 2.8);
  color: var(--ink);
  position: relative;
}

.cd-exploded.is-live {
  height: var(--ex-h);
}

.cd-exploded__stage {
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-6);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  display: grid;
  position: relative;
}

.cd-exploded.is-live .cd-exploded__stage {
  height: var(--cd-vh);
  position: sticky;
  top: 0;
}

.cd-exploded__svg {
  width: 100%;
  max-height: calc(var(--cd-vh) * .82);
  overflow: visible;
}

.cd-exploded__part {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(calc(var(--dx, 0) * var(--p, 1) * 1px), calc(var(--dy, 0) * var(--p, 1) * 1px));
  transition: stroke var(--dur-effects) var(--ease-effects), filter var(--dur-effects) var(--ease-effects);
}

.cd-exploded__part * {
  vector-effect: non-scaling-stroke;
}

.cd-exploded__part.is-focus {
  stroke: var(--accent);
  stroke-width: 2.4px;
  filter: drop-shadow(0 0 6px var(--accent));
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-exploded__part.is-focus {
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent));
  }
}

.cd-exploded__notes {
  gap: var(--space-4);
  counter-reset: cd-ex;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cd-exploded__notes > li {
  counter-increment: cd-ex;
  color: var(--ink-soft);
  transition: color var(--dur-effects) var(--ease-effects), opacity var(--dur-effects) var(--ease-effects);
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  display: grid;
}

.cd-exploded__notes > li:before {
  content: counter(cd-ex, decimal-leading-zero);
  color: var(--accent);
  grid-row: span 2;
  font: 500 12px / 1.6 JetBrains Mono, ui-monospace, monospace;
}

.cd-exploded__notes b {
  color: var(--ink);
  font-weight: 600;
}

.cd-exploded.is-live .cd-exploded__notes > li {
  opacity: .45;
}

.cd-exploded.is-live .cd-exploded__notes > li.is-focus {
  opacity: 1;
  color: var(--ink);
}

@media (max-width: 760px) {
  .cd-exploded__stage {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .cd-exploded__svg {
    max-height: calc(var(--cd-vh) * .5);
  }

  .cd-exploded.is-live .cd-exploded__notes > li:not(.is-focus) {
    display: none;
  }
}

.cd-viewfinder {
  --vf-inset: 16px;
  --vf-size: 26px;
  color: #fff;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.cd-viewfinder > :is(img, video, .cd-ph) {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-viewfinder {
  text-shadow: 0 1px 3px #0000008c;
}

.cd-viewfinder :is(.cd-viewfinder__corner, .cd-viewfinder__focus) {
  filter: drop-shadow(0 1px 2px #00000073);
}

.cd-viewfinder__corner {
  width: var(--vf-size);
  height: var(--vf-size);
  pointer-events: none;
  border: 2px solid;
  position: absolute;
}

.cd-viewfinder__corner:first-of-type {
  top: var(--vf-inset);
  left: var(--vf-inset);
  border-bottom: 0;
  border-right: 0;
}

.cd-viewfinder__corner:nth-of-type(2) {
  top: var(--vf-inset);
  right: var(--vf-inset);
  border-bottom: 0;
  border-left: 0;
}

.cd-viewfinder__corner:nth-of-type(3) {
  bottom: var(--vf-inset);
  left: var(--vf-inset);
  border-top: 0;
  border-right: 0;
}

.cd-viewfinder__corner:nth-of-type(4) {
  bottom: var(--vf-inset);
  right: var(--vf-inset);
  border-top: 0;
  border-left: 0;
}

.cd-viewfinder__hud {
  inset: calc(var(--vf-inset) + var(--vf-size) * .35) calc(var(--vf-inset) + var(--vf-size) * .6);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #0000008c;
  pointer-events: none;
  flex-direction: column;
  justify-content: space-between;
  font: 500 12px / 1.3 JetBrains Mono, ui-monospace, monospace;
  display: flex;
  position: absolute;
}

.cd-viewfinder__row {
  justify-content: space-between;
  gap: 16px;
  display: flex;
}

.cd-viewfinder__rec {
  align-items: center;
  gap: .5em;
  display: inline-flex;
}

.cd-viewfinder__rec:before {
  content: "";
  background: var(--danger);
  width: .65em;
  height: .65em;
  box-shadow: 0 0 8px var(--danger);
  border-radius: 50%;
}

.cd-viewfinder__focus {
  opacity: .8;
  pointer-events: none;
  border: 1px solid;
  width: 64px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-viewfinder.is-rec .cd-viewfinder__rec:before {
    animation: 1s step-end infinite cd-vf-blink;
  }

  @keyframes cd-vf-blink {
    50% {
      opacity: .15;
    }
  }
}

@property --ring-spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.cd-ring {
  --ring-r: min(34vw, 380px);
  --ring-size: min(20vw, 120px);
  --ring-tilt: -12deg;
  --ring-dur: 46s;
  min-height: calc(var(--ring-size) * 2.4 + var(--ring-r) * .5);
  perspective: 1400px;
  place-items: center;
  display: grid;
  position: relative;
  overflow: clip;
}

.cd-ring__scene {
  transform-style: preserve-3d;
  transform: rotateX(var(--ring-tilt));
  grid-area: 1 / 1;
  place-items: center;
  display: grid;
}

.cd-ring__center {
  transform: rotateX(calc(-1 * var(--ring-tilt)));
  grid-area: 1 / 1;
  position: relative;
}

.cd-ring__items {
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--ring-spin));
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-ring__items > li {
  --a: calc(var(--i) * 360deg / var(--n));
  width: var(--ring-size);
  aspect-ratio: 4 / 3;
  margin: calc(var(--ring-size) * -.375) 0 0 calc(var(--ring-size) * -.5);
  transform: rotateY(var(--a)) translateZ(var(--ring-r)) rotateY(calc(-1 * var(--a) - var(--ring-spin))) rotateX(calc(-1 * var(--ring-tilt)));
  opacity: calc(.62 + .38 * cos(var(--a) + var(--ring-spin)));
  position: absolute;
  top: 0;
  left: 0;
}

.cd-ring__items > li > * {
  object-fit: cover;
  border-radius: var(--radius-sm);
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: 0 10px 24px #00000029;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-ring.is-live .cd-ring__items {
    animation: cd-ring-spin var(--ring-dur) linear infinite;
  }

  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-ring.is-live:hover .cd-ring__items {
    animation-play-state: paused;
  }

  @keyframes cd-ring-spin {
    to {
      --ring-spin: -360deg;
    }
  }
}

.cd-hotspots {
  margin: 0;
  position: relative;
}

.cd-hotspots > :is(img, .cd-ph, svg) {
  width: 100%;
  height: auto;
  display: block;
}

.cd-hotspot {
  left: var(--x);
  top: var(--y);
  border-radius: var(--radius-full);
  background: var(--surface);
  min-height: 32px;
  color: var(--ink);
  font: 600 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: scale var(--dur-spatial-fast) var(--ease-spatial-fast), opacity var(--dur-effects-fast) var(--ease-effects-fast);
  transition-delay: min(calc(var(--i, 0) * 90ms), var(--stagger-max, .5s));
  border: 0;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  display: inline-flex;
  position: absolute;
  translate: -50% -50%;
  box-shadow: 0 1px 2px #00000014, 0 8px 22px #00000029;
}

.cd-hotspot:before {
  content: "";
  background: var(--accent) radial-gradient(circle, var(--accent-ink) 0 3px, transparent 3.5px);
  border-radius: 50%;
  flex: none;
  width: 22px;
  height: 22px;
}

.cd-hotspot:empty {
  padding: 5px;
}

.cd-hotspot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

html.cd-js .cd-hotspots:not(.in) .cd-hotspot {
  opacity: 0;
  scale: .4;
}

.cd-hotspots.in .cd-hotspot {
  transition-delay: 0s;
}

.cd-hotspot__card {
  inset: auto;
  top: var(--hy, 50%);
  left: var(--hx, 50%);
  width: min(280px, 100vw - 32px);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  border: 0;
  margin: 0;
  position: fixed;
}

.cd-hotspot__card h3 {
  font: 600 16px/1.3 var(--font-body);
  margin: 0 0 6px;
}

.cd-hotspot__card p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="2"], [data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-hotspot:before {
    animation: cd-hot-pulse 2.4s var(--ease-out) infinite;
    animation-delay: calc(var(--i, 0) * .3s);
  }

  @keyframes cd-hot-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
    }

    70%, 100% {
      box-shadow: 0 0 0 10px #0000;
    }
  }
}

.cd-blocks {
  isolation: isolate;
  position: relative;
}

.cd-blocks__grid {
  z-index: 2;
  grid-template-columns: repeat(var(--n, 8), 1fr);
  grid-template-rows: repeat(var(--n, 8), 1fr);
  pointer-events: none;
  display: grid;
  position: absolute;
  inset: 0;
}

.cd-blocks__grid > i {
  background: var(--blocks-color, var(--accent));
  box-shadow: 0 0 0 .5px var(--blocks-color, var(--accent));
  transition: opacity .12s linear;
  transition-delay: var(--d, 0s);
}

.cd-blocks.in .cd-blocks__grid > i {
  opacity: 0;
}

@property --fan {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.cd-fan {
  --fan-angle: 8deg;
  --fan-gap: 16%;
  min-height: 380px;
  padding-block: var(--space-8);
  place-items: center;
  display: grid;
  position: relative;
}

.cd-fan > * {
  transform-origin: 50% 120%;
  width: min(44%, 230px);
  rotate: calc(var(--o, 0) * var(--fan-angle) * var(--fan));
  translate: calc(var(--o, 0) * var(--fan-gap) * var(--fan)) calc(var(--a, 0) * 3% * var(--fan));
  border-radius: var(--radius-md);
  grid-area: 1 / 1;
  overflow: hidden;
  box-shadow: 0 2px 4px #00000014, 0 18px 40px #00000029;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-fan {
      animation: linear both cd-fan-open;
      animation-timeline: view();
      animation-range: entry 15% cover 48%;
    }

    @keyframes cd-fan-open {
      from {
        --fan: 0;
      }

      to {
        --fan: 1;
      }
    }
  }
}

@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.cd-js :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-fan:not(.in) {
      --fan: 0;
    }

    :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-fan {
      transition: --fan var(--dur-spatial-slow) var(--ease-spatial-slow);
    }
  }
}

.cd-edge {
  --edge-h: 26px;
  --edge-w: 180px;
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 180 26%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 0H180V23.00L180 23.00L174 22.78L168 22.14L162 21.09L156 19.69L150 18.00L144 16.09L138 14.05L132 11.95L126 9.91L120 8.00L114 6.31L108 4.91L102 3.86L96 3.22L90 3.00L84 3.22L78 3.86L72 4.91L66 6.31L60 8.00L54 9.91L48 11.95L42 14.05L36 16.09L30 18.00L24 19.69L18 21.09L12 22.14L6 22.78L0 23.00Z%27/%3E%3C/svg%3E");
  --edge-shape-top: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 180 26%27 preserveAspectRatio=%27none%27%3E%3Cpath transform=%27matrix%281 0 0 -1 0 26%29%27 d=%27M0 0H180V23.00L180 23.00L174 22.78L168 22.14L162 21.09L156 19.69L150 18.00L144 16.09L138 14.05L132 11.95L126 9.91L120 8.00L114 6.31L108 4.91L102 3.86L96 3.22L90 3.00L84 3.22L78 3.86L72 4.91L66 6.31L60 8.00L54 9.91L48 11.95L42 14.05L36 16.09L30 18.00L24 19.69L18 21.09L12 22.14L6 22.78L0 23.00Z%27/%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape) bottom left / var(--edge-w) var(--edge-h) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape) bottom left / var(--edge-w) var(--edge-h) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape) bottom left / var(--edge-w) var(--edge-h) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape) bottom left / var(--edge-w) var(--edge-h) repeat-x;
  padding-bottom: calc(var(--edge-h) + var(--space-4));
}

.cd-edge[data-edge="zigzag"] {
  --edge-w: 36px;
  --edge-h: 16px;
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 16%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 0H36V2L18 16L0 2Z%27/%3E%3C/svg%3E");
  --edge-shape-top: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 16%27 preserveAspectRatio=%27none%27%3E%3Cpath transform=%27matrix%281 0 0 -1 0 16%29%27 d=%27M0 0H36V2L18 16L0 2Z%27/%3E%3C/svg%3E");
}

.cd-edge[data-edge="scallop"] {
  --edge-w: 44px;
  --edge-h: 20px;
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 44 20%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 0H44V2A22 18 0 0 1 0 2Z%27/%3E%3C/svg%3E");
  --edge-shape-top: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 44 20%27 preserveAspectRatio=%27none%27%3E%3Cpath transform=%27matrix%281 0 0 -1 0 20%29%27 d=%27M0 0H44V2A22 18 0 0 1 0 2Z%27/%3E%3C/svg%3E");
}

.cd-edge--top {
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape-top) top left / var(--edge-w) var(--edge-h) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape-top) top left / var(--edge-w) var(--edge-h) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape-top) top left / var(--edge-w) var(--edge-h) repeat-x;
  mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-shape-top) top left / var(--edge-w) var(--edge-h) repeat-x;
  padding-bottom: 0;
  padding-top: calc(var(--edge-h) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-edge[data-edge-drift] {
    animation: 9s linear infinite cd-edge-drift;
  }

  @keyframes cd-edge-drift {
    to {
      -webkit-mask-position: 0 0, var(--edge-w) 100%;
      -webkit-mask-position: 0 0, var(--edge-w) 100%;
      -webkit-mask-position: 0 0, var(--edge-w) 100%;
      mask-position: 0 0, var(--edge-w) 100%;
    }
  }
}

.cd-scrollswitch {
  --ss-h: calc(var(--cd-vh) * 2.3);
  position: relative;
}

.cd-scrollswitch.is-live {
  height: var(--ss-h);
}

.cd-scrollswitch__stage {
  align-content: center;
  justify-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-6);
  box-sizing: border-box;
  text-align: center;
  display: grid;
  position: relative;
}

.cd-scrollswitch.is-live .cd-scrollswitch__stage {
  height: var(--cd-vh);
  position: sticky;
  top: 0;
}

.cd-scrollswitch__title {
  margin: 0;
  display: grid;
}

.cd-scrollswitch__title > * {
  transition: opacity var(--dur-effects) var(--ease-effects), translate var(--dur-spatial) var(--ease-spatial), filter var(--dur-effects) var(--ease-effects);
  grid-area: 1 / 1;
}

.cd-scrollswitch:not(.is-on) .cd-scrollswitch__title [data-state="on"], .cd-scrollswitch.is-on .cd-scrollswitch__title [data-state="off"] {
  opacity: 0;
  filter: blur(8px);
  translate: 0 .25em;
}

.cd-scrollswitch__track {
  --knob: 0;
  aspect-ratio: 1 / 1.9;
  background: var(--ink);
  border-radius: 999px;
  width: clamp(104px, 13vw, 160px);
  position: relative;
  container-type: size;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-scrollswitch__track {
    background: color-mix(in oklab, var(--ink) 14%, var(--surface));
  }
}

.cd-scrollswitch__track {
  transition: background-color var(--dur-effects) var(--ease-effects);
  box-shadow: inset 0 -12px 24px #00000024, inset 0 10px 18px #fff6, 0 28px 60px -24px #00000059;
}

.cd-scrollswitch.is-on .cd-scrollswitch__track {
  background: var(--accent);
  box-shadow: inset 0 -12px 24px #0000002e, inset 0 10px 18px #ffffff59, 0 28px 60px -20px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-scrollswitch.is-on .cd-scrollswitch__track {
    box-shadow: inset 0 -12px 24px #0000002e, inset 0 10px 18px #ffffff59, 0 28px 60px -20px color-mix(in oklab, var(--accent) 70%, transparent);
  }
}

.cd-scrollswitch__knob {
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, var(--ink), var(--ink) 70%);
  border-radius: 50%;
  place-items: center;
  width: 84cqw;
  display: grid;
  position: absolute;
  top: 8cqw;
  left: 8cqw;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-scrollswitch__knob {
    background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--ink) 70%, white), var(--ink) 70%);
  }
}

.cd-scrollswitch__knob {
  color: var(--bg);
  translate: 0 calc(var(--knob) * (100cqh - 100cqw));
  box-shadow: 0 10px 22px #00000059, inset 0 2px 3px #ffffff40;
}

.cd-scrollswitch__knob .cd-icon {
  width: 42%;
  height: 42%;
  transition: rotate var(--dur-spatial) var(--ease-spatial);
}

.cd-scrollswitch.is-on .cd-scrollswitch__knob .cd-icon {
  rotate: 180deg;
}

.cd-vpill {
  --vp-w: 19rem;
  --vp-h: 4.6rem;
  --vp-open-w: 24rem;
  --vp-open-h: 30rem;
  width: min(var(--vp-w), 100%);
  height: var(--vp-h);
  border-radius: calc(var(--vp-h) / 2);
  background: var(--ink);
  color: var(--bg);
  transition: width var(--dur-spatial-slow) var(--ease-spatial), height var(--dur-spatial-slow) var(--ease-spatial), border-radius var(--dur-spatial-slow) var(--ease-spatial);
  display: block;
  position: relative;
  overflow: hidden;
}

.cd-vpill__media {
  object-fit: cover;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--dur-effects) var(--ease-effects);
  position: absolute;
  inset: 0;
}

.cd-vpill__label {
  left: 1.6rem;
  right: calc(var(--vp-h) + .6rem);
  font: var(--cd-display-weight) 1.25rem/1.1 var(--font-display);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity var(--dur-effects-fast) var(--ease-effects-fast);
  position: absolute;
  top: 50%;
  overflow: hidden;
  translate: 0 -50%;
}

.cd-vpill__btn {
  width: calc(var(--vp-h) - .8rem);
  height: calc(var(--vp-h) - .8rem);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: top var(--dur-spatial-slow) var(--ease-spatial), rotate var(--dur-spatial) var(--ease-spatial);
  border: 0;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: .4rem;
  right: .4rem;
}

.cd-vpill__btn .cd-icon {
  width: 22px;
  height: 22px;
}

.cd-vpill__btn:focus-visible {
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

.cd-vpill.is-open {
  width: min(var(--vp-open-w), 100%);
  height: var(--vp-open-h);
  border-radius: var(--radius-xl);
}

.cd-vpill.is-open .cd-vpill__media {
  opacity: 1;
  transition-delay: .2s;
}

.cd-vpill.is-open .cd-vpill__label {
  opacity: 0;
}

.cd-vpill.is-open .cd-vpill__btn {
  top: calc(100% - var(--vp-h) + .4rem);
  rotate: 180deg;
}

[data-motion="1"] .cd-vpill {
  transition: none;
}

.cd-slot {
  vertical-align: bottom;
  white-space: nowrap;
  height: 1.12em;
  display: inline-block;
  overflow: clip;
}

.cd-slot__reel {
  flex-direction: column;
  display: flex;
  translate: 0;
}

.cd-slot__reel > span {
  height: 1.12em;
  line-height: 1.12em;
  display: block;
}

.cd-slot.is-spinning .cd-slot__reel {
  transition: translate var(--slot-dur, 1.9s) cubic-bezier(.15, .6, .1, 1);
}

.cd-split[data-tilt] .cd-split__w {
  perspective: 700px;
}

.cd-split[data-tilt] .cd-split__i {
  transform-origin: 50% 100%;
  transition-property: translate, rotate;
}

html.cd-js :is([data-motion="3"], [data-motion="4"], [data-motion="5"]) .cd-split[data-tilt]:not(.in) .cd-split__i {
  rotate: x 55deg;
}

.cd-duo {
  padding-block: var(--space-8);
  place-items: center;
  display: grid;
  position: relative;
  overflow: clip;
}

.cd-duo > .cd-marquee {
  font: var(--cd-display-weight) clamp(48px, 10vw, 150px)/.95 var(--font-display);
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  grid-area: 1 / 1;
  align-self: start;
  margin-top: 12%;
}

.cd-duo > .cd-marquee + .cd-marquee {
  color: var(--accent);
  align-self: end;
  margin: 0 0 12%;
  font-style: italic;
}

.cd-duo__media {
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  grid-area: 1 / 1;
  width: min(36vw, 340px);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px #0006;
}

.cd-duo__media > * {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-glass--liquid {
  --glass-bg: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-glass--liquid {
    --glass-bg: color-mix(in oklab, var(--surface) 34%, transparent);
  }
}

.cd-glass--liquid {
  -webkit-backdrop-filter: blur(12px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(12px) saturate(1.9) brightness(1.05);
}

.cd-glass--liquid:after {
  content: "";
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(120% 90% at 18% -10%, #ffffff6b, #0000 55%), radial-gradient(90% 80% at 85% 115%, #fff3, #0000 60%), linear-gradient(#ffffff1a, #0000000f);
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 10px 18px -12px #ffffffe6, inset 0 -8px 16px -10px #00000047, inset 0 0 0 1px #ffffff24;
}

.cd-firma-canvas {
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

:is(.cd-ascii, .cd-datagrid, .cd-hexgrid, .cd-terrain, .cd-tide, .cd-topo) {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

:is(.cd-ascii, .cd-hexgrid, .cd-terrain, .cd-tide) {
  --fx: var(--neon, var(--accent));
  background-color: var(--bg);
}

.cd-datagrid {
  --cell: 48px;
  --fx: var(--neon, var(--accent));
  background-color: var(--bg);
  background-image: linear-gradient(var(--fx) 1px, transparent 1px), linear-gradient(90deg, var(--fx) 1px, transparent 1px);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-datagrid {
    background-image: linear-gradient(color-mix(in oklab, var(--fx) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--fx) 22%, transparent) 1px, transparent 1px);
  }
}

.cd-datagrid {
  background-size: var(--cell) var(--cell);
  background-position: center;
}

.cd-topo {
  --fx: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-topo {
    --fx: color-mix(in oklab, var(--ink) 30%, transparent);
  }
}

[data-mask="start"] > .cd-firma-canvas {
  -webkit-mask: linear-gradient(90deg, #0000 8%, #000 62%);
  mask: linear-gradient(90deg, #0000 8%, #000 62%);
}

[data-mask="end"] > .cd-firma-canvas {
  -webkit-mask: linear-gradient(270deg, #0000 8%, #000 62%);
  mask: linear-gradient(270deg, #0000 8%, #000 62%);
}

[data-mask="center"] > .cd-firma-canvas {
  -webkit-mask: radial-gradient(closest-side, #0000 30%, #000 100%);
  mask: radial-gradient(closest-side, #0000 30%, #000 100%);
}

:is(.cd-terrain, .cd-tide):not(.is-live) {
  background-image: radial-gradient(90% 60% at 50% 105%, var(--accent), transparent 70%);
}

@supports (color: color-mix(in lab, red, red)) {
  :is(.cd-terrain, .cd-tide):not(.is-live) {
    background-image: radial-gradient(90% 60% at 50% 105%, color-mix(in oklab, var(--accent) 38%, transparent), transparent 70%);
  }
}

.cd-creveal {
  position: relative;
  overflow: hidden;
}

.cd-creveal > :is(.cd-creveal__base, .cd-creveal__top) {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-creveal__top {
  opacity: 0;
  transition: opacity var(--dur-effects) var(--ease-effects);
  position: absolute;
  inset: 0;
}

.cd-creveal.is-shown .cd-creveal__top {
  opacity: 1;
}

.cd-creveal[data-mode="torch"].is-live .cd-creveal__top {
  opacity: var(--torch-o, 0);
  -webkit-mask: radial-gradient(circle var(--torch-r, 140px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 72%);
  -webkit-mask: radial-gradient(circle var(--torch-r, 140px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 72%);
  -webkit-mask: radial-gradient(circle var(--torch-r, 140px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 72%);
  mask: radial-gradient(circle var(--torch-r, 140px) at var(--mx, 50%) var(--my, 50%), #000 35%, transparent 72%);
}

.cd-creveal.is-live:not([data-mode="torch"]) .cd-creveal__top {
  visibility: hidden;
}

.cd-creveal.is-live.is-shown:not([data-mode="torch"]) .cd-creveal__top {
  visibility: visible;
  opacity: 1;
}

.cd-creveal__lock {
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  border-radius: var(--radius-full);
  background: var(--accent);
  min-height: 44px;
  color: var(--accent-ink);
  font: 600 13px/1 var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
  border: 0;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  display: inline-flex;
  position: absolute;
}

.cd-creveal__lock[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.cd-creveal__lock:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cd-seq {
  --seq-h: calc(var(--cd-vh) * 3.2);
  position: relative;
}

.cd-seq.is-live {
  height: var(--seq-h);
}

.cd-seq__stage {
  min-height: calc(var(--cd-vh) * .7);
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  display: grid;
  position: relative;
  overflow: hidden;
}

.cd-seq.is-live .cd-seq__stage {
  height: var(--cd-vh);
  position: sticky;
  top: 0;
}

.cd-seq__stage > * {
  grid-area: 1 / 1;
}

.cd-seq__poster {
  object-fit: contain;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cd-seq.is-drawn .cd-seq__poster {
  visibility: hidden;
}

.cd-seq__stage > .cd-firma-canvas {
  z-index: 0;
}

.cd-seq__step {
  z-index: 1;
  max-width: 30rem;
  margin: 0 var(--space-6) var(--space-12);
  align-self: end;
  position: relative;
}

.cd-seq.is-live .cd-seq__step {
  opacity: 0;
  transition: opacity var(--dur-effects) var(--ease-effects), translate var(--dur-spatial) var(--ease-spatial);
  translate: 0 16px;
}

.cd-seq.is-live .cd-seq__step.is-on {
  opacity: 1;
  translate: 0;
}

.cd-seq:not(.is-live) .cd-seq__step {
  display: none;
}

.cd-seq:not(.is-live) .cd-seq__step:first-of-type {
  display: block;
}

.cd-globe {
  aspect-ratio: 1;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  position: relative;
}

.cd-globe canvas {
  cursor: grab;
  contain: layout paint size;
  width: 100%;
  height: 100%;
  display: block;
}

.cd-globe canvas:active {
  cursor: grabbing;
}

.cd-globe:not(.is-live) {
  background: radial-gradient(circle at 40% 35%, var(--accent), var(--surface) 62%, transparent 63%);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-globe:not(.is-live) {
    background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--accent) 22%, var(--surface)), var(--surface) 62%, transparent 63%);
  }
}

.cd-rive {
  position: relative;
}

.cd-rive > canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.cd-rive.is-live > :not(canvas) {
  visibility: hidden;
}

.cd-receipt {
  --cd-receipt-w: 300px;
  --cd-receipt-paper: var(--surface);
  --cd-receipt-tooth: 7px;
  width: min(100%, calc(var(--cd-receipt-w) + 48px));
  justify-items: center;
  margin: 0;
  display: grid;
}

.cd-receipt__slot {
  z-index: 1;
  border-radius: var(--radius-full);
  background: var(--ink);
  width: 100%;
  height: 14px;
  box-shadow: inset 0 -4px 0 var(--ink);
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-receipt__slot {
    box-shadow: inset 0 -4px 0 color-mix(in oklab, var(--ink) 55%, var(--bg));
  }
}

.cd-receipt__window {
  width: min(var(--cd-receipt-w), 100%);
  margin-top: -7px;
  padding: 0 16px 28px;
  overflow: hidden;
}

.cd-receipt__feed {
  filter: drop-shadow(0 1px 1px #0000000f) drop-shadow(0 10px 18px #0000001f);
}

.cd-receipt__paper {
  padding: 24px 20px calc(24px + var(--cd-receipt-tooth));
  background: var(--cd-receipt-paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--cd-receipt-font, var(--font-body));
  font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cd-receipt-tooth)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--cd-receipt-tooth) * 2) var(--cd-receipt-tooth) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cd-receipt-tooth)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--cd-receipt-tooth) * 2) var(--cd-receipt-tooth) repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cd-receipt-tooth)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--cd-receipt-tooth) * 2) var(--cd-receipt-tooth) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cd-receipt-tooth)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--cd-receipt-tooth) * 2) var(--cd-receipt-tooth) repeat-x;
  position: relative;
}

.cd-receipt__head {
  text-align: center;
  text-wrap: balance;
  margin: 0 0 14px;
  font-weight: 600;
}

.cd-receipt__head small {
  color: var(--ink-soft);
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  display: block;
}

.cd-receipt__lines {
  border-block: 1.5px dashed var(--ink);
  gap: 6px;
  margin: 0;
  padding: 12px 0;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-receipt__lines {
    border-block: 1.5px dashed color-mix(in oklab, var(--ink) 30%, transparent);
  }
}

.cd-receipt__lines > div {
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px;
  display: grid;
}

.cd-receipt__lines dt {
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.cd-receipt__lines dt:after {
  content: "";
  border-bottom: 1.5px dotted var(--ink);
  flex: 1;
  min-width: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-receipt__lines dt:after {
    border-bottom: 1.5px dotted color-mix(in oklab, var(--ink) 35%, transparent);
  }
}

.cd-receipt__lines dt:after {
  translate: 0 -.3em;
}

.cd-receipt__lines dd {
  white-space: nowrap;
  margin: 0;
}

.cd-receipt__total {
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.cd-receipt__foot {
  text-align: center;
  color: var(--ink-soft);
  text-wrap: balance;
  margin: 16px 0 0;
  font-size: 13px;
}

html.cd-js .cd-receipt:not(.is-printed) .cd-receipt__feed {
  translate: 0 -101%;
}

.cd-ticket {
  --cd-notch: 12px;
  --cd-ticket-paper: var(--surface);
  --cd-ticket-line: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .cd-ticket {
    --cd-ticket-line: color-mix(in oklab, var(--ink) 30%, transparent);
  }
}

.cd-ticket {
  width: 100%;
  max-width: 640px;
  position: relative;
  container-type: inline-size;
}

.cd-ticket__body {
  filter: drop-shadow(0 1px 1px #0000000f) drop-shadow(0 14px 26px #0000001f);
  grid-template-columns: 1fr minmax(128px, 32%);
  display: grid;
}

.cd-ticket__main, .cd-ticket__stub {
  background: var(--cd-ticket-paper);
  min-width: 0;
  color: var(--ink);
  padding: 22px 24px;
}

.cd-ticket__main {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

.cd-ticket__stub {
  border-left: 2px dashed var(--cd-ticket-line);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transition: translate var(--dur-slow) var(--ease-out-expo), rotate var(--dur-slow) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out) calc(var(--dur-slow) * .35);
  align-content: space-between;
  gap: 14px;
  display: grid;
}

.cd-ticket__title {
  font: var(--cd-display-weight) clamp(26px, 7cqw, 40px)/1.02 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

.cd-ticket__meta {
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 18px 0 0;
  display: flex;
}

.cd-ticket__meta dt {
  color: var(--ink-soft);
  font-size: 13px;
}

.cd-ticket__meta dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-weight: 600;
}

.cd-ticket__code {
  color: var(--ink-soft);
  margin: 0;
  font-size: 13px;
}

.cd-ticket__code strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  font-size: 18px;
  display: block;
}

.cd-ticket__bars {
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px);
  border-radius: 2px;
  height: 44px;
}

.cd-ticket__tear {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  min-height: 44px;
  color: var(--ink);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  background: none;
  justify-self: start;
  padding: 0 16px;
}

.cd-ticket__tear:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-ticket[data-tear] .cd-ticket__stub {
  touch-action: pan-y;
  cursor: grab;
}

.cd-ticket.is-torn .cd-ticket__stub {
  opacity: 0;
  pointer-events: none;
  translate: 28px 56px;
  rotate: 9deg;
}

.cd-ticket__main > * {
  translate: calc(var(--px, 0) * var(--depth, 0px)) calc(var(--py, 0) * var(--depth, 0px));
  transition: translate var(--dur-fast) var(--ease-out);
}

.cd-ticket__title {
  --depth: 10px;
}

.cd-ticket__meta {
  --depth: 5px;
}

@container (max-width: 459px) {
  .cd-ticket__body {
    grid-template-columns: 1fr;
  }

  .cd-ticket__main {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle var(--cd-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  }

  .cd-ticket__stub {
    border-left: 0;
    border-top: 2px dashed var(--cd-ticket-line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle var(--cd-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--cd-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .cd-ticket__bars {
    grid-column: 1 / -1;
  }

  .cd-ticket.is-torn .cd-ticket__stub {
    translate: 0 72px;
    rotate: -4deg;
  }
}

.cd-hold {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: color var(--dur-slow) var(--ease-out-expo), scale var(--dur-fast) var(--ease-spring-snappy), width var(--dur-spatial) var(--ease-spatial);
}

.cd-hold:before {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cd-hold:hover {
    color: var(--accent-ink);
  }
}

.cd-hold__fill {
  align-items: center;
  justify-content: inherit;
  gap: inherit;
  padding: inherit;
  background: var(--cd-btn-fill);
  color: var(--cd-btn-fill-ink);
  white-space: nowrap;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-base) var(--ease-out);
  display: flex;
  position: absolute;
  inset: 0;
}

.cd-hold.is-holding .cd-hold__fill {
  clip-path: inset(0);
  transition: clip-path var(--cd-hold, 1.2s) linear;
}

.cd-hold.is-done .cd-hold__fill {
  clip-path: inset(0);
  transition: none;
}

.cd-hold.is-done {
  cursor: default;
}

.cd-hold__label {
  white-space: nowrap;
}

.cd-hold.is-hint {
  animation: cd-hold-hint .42s var(--ease-out);
}

@keyframes cd-hold-hint {
  20%, 60% {
    translate: -4px;
  }

  40%, 80% {
    translate: 4px;
  }
}

.cd-hold-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.cd-hold__undo {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  min-height: 44px;
  color: var(--ink);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

.cd-hold__undo[hidden] {
  display: none;
}

.cd-hold__undo:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.cd-hold__undo:after {
  content: "";
  background: var(--accent);
  transform-origin: 0;
  height: 3px;
  animation: cd-hold-undo var(--cd-undo, 5s) linear forwards;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes cd-hold-undo {
  from {
    scale: 1;
  }

  to {
    scale: 0 1;
  }
}

:root[data-tone="elegante"] {
  --dur-base: .42s;
  --dur-slow: .76s;
  --dur-page: .64s;
  --dur-cinematic: 1.3s;
  --dur-exit: .26s;
  --stagger: 90ms;
  --stagger-max: .5s;
  --dur-spatial-fast: .45s;
  --dur-spatial: .65s;
  --dur-spatial-slow: .85s;
  --dur-effects-fast: .2s;
  --dur-effects: .28s;
  --dur-effects-slow: .42s;
  --ease-out: var(--ease-out-expo);
  --ease-spatial-fast: var(--ease-spatial-standard);
  --ease-spatial: var(--ease-spatial-standard);
  --ease-spatial-slow: var(--ease-spatial-standard);
}

:root[data-tone="netto"] {
  --dur-base: .26s;
  --dur-slow: .42s;
  --dur-page: .38s;
  --dur-cinematic: .8s;
  --dur-exit: .16s;
  --stagger: 40ms;
  --stagger-max: .4s;
  --dur-spatial-fast: .3s;
  --dur-spatial: .4s;
  --dur-spatial-slow: .5s;
  --dur-effects-fast: .12s;
  --dur-effects: .16s;
  --dur-effects-slow: .24s;
  --ease-spatial-fast: var(--ease-spatial-standard);
  --ease-spatial: var(--ease-spatial-standard);
  --ease-spatial-slow: var(--ease-spatial-standard);
}

:root[data-tone="cinematico"] {
  --dur-base: .38s;
  --dur-slow: .72s;
  --dur-page: .72s;
  --dur-cinematic: 1.4s;
  --dur-exit: .28s;
  --stagger: 90ms;
  --stagger-max: .6s;
  --dur-spatial-slow: .8s;
  --ease-out: var(--ease-out-expo);
}

:root[data-tone="energico"] {
  --dur-base: .22s;
  --dur-slow: .38s;
  --dur-page: .3s;
  --dur-cinematic: .7s;
  --dur-exit: .12s;
  --stagger: 30ms;
  --stagger-max: .35s;
  --dur-spatial-fast: .28s;
  --dur-spatial: .38s;
  --dur-spatial-slow: .5s;
  --dur-effects-fast: .1s;
  --dur-effects: .14s;
  --dur-effects-slow: .2s;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-in-out);
}

::view-transition-group(*.cd-media) {
  animation-duration: calc(var(--dur-page) * 1.35);
  animation-timing-function: var(--ease-out-expo);
}

::view-transition-old(*.cd-media) {
  object-fit: cover;
  height: 100%;
  overflow: clip;
}

::view-transition-new(*.cd-media) {
  object-fit: cover;
  height: 100%;
  overflow: clip;
}

html:active-view-transition-type(forward)::view-transition-old(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-out-left;
}

html:active-view-transition-type(forward)::view-transition-new(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-in-right;
}

html:active-view-transition-type(backward)::view-transition-old(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-out-right;
}

html:active-view-transition-type(backward)::view-transition-new(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-in-left;
}

html:active-view-transition-type(curtain)::view-transition-old(root) {
  animation: none;
}

html:active-view-transition-type(curtain)::view-transition-new(root) {
  animation: var(--dur-cinematic) var(--ease-out-expo) both cd-vt-curtain;
}

@keyframes cd-vt-out-left {
  to {
    opacity: 0;
    translate: -8%;
  }
}

@keyframes cd-vt-in-right {
  from {
    opacity: 0;
    translate: 8%;
  }
}

@keyframes cd-vt-out-right {
  to {
    opacity: 0;
    translate: 8%;
  }
}

@keyframes cd-vt-in-left {
  from {
    opacity: 0;
    translate: -8%;
  }
}

@keyframes cd-vt-curtain {
  from {
    clip-path: inset(100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

.vt-hero {
  view-transition-name: vt-hero;
}

.vt-title {
  view-transition-name: vt-title;
}

.vt-media {
  view-transition-name: vt-media;
  view-transition-class: cd-media;
}

.vt-nav {
  view-transition-name: vt-nav;
}

[data-motion="1"] [data-reveal-group]:not(.in) > * {
  opacity: 1;
  translate: none;
}

[data-motion="1"] [data-reveal]:is([data-reveal="mask"], [data-reveal="blur"]):not(.in) {
  clip-path: inset(0);
  filter: none;
  opacity: 1;
  translate: none;
}

[data-motion="1"] .cd-reveal-img {
  clip-path: inset(0 0 0 0 round var(--radius-lg)) !important;
}

[data-motion="1"] .cd-reveal-img > * {
  scale: none !important;
}

[data-motion="1"] .cd-split .cd-split__i {
  translate: none !important;
}

[data-motion="1"] .cd-lift:hover {
  filter: none;
  translate: none;
}

:is([data-motion="1"], [data-motion="2"]) :is([data-parallax], [data-scroll-scale]) {
  animation: none !important;
}

:is([data-motion="1"], [data-motion="2"]) :is(.cd-tilt, .cd-magnetic, [data-magnetic]) {
  transform: translate3d(0, 0, 0);
}

:is([data-motion="1"], [data-motion="2"]) .cd-ticket__main > * {
  translate: none;
}

[data-motion="1"] .cd-ticket__stub {
  transition: none;
}

[data-motion="1"] .cd-hold.is-hint {
  animation: none;
}

:is([data-motion="1"], [data-motion="2"]) .cd-menu {
  clip-path: none;
  transition-property: display, overlay;
}

:is([data-motion="1"], [data-motion="2"], [data-motion="3"]) [data-scroll-type] {
  animation: none !important;
}

:is([data-motion="1"], [data-motion="2"], [data-motion="3"]) .cd-marquee__track, :is([data-motion="1"], [data-motion="2"], [data-motion="3"]) .cd-mesh:before {
  animation: none;
}

:is([data-motion="1"], [data-motion="2"], [data-motion="3"]) .cd-spotlight:before, :is([data-motion="1"], [data-motion="2"], [data-motion="3"]) .cd-grain, :is([data-motion="1"], [data-motion="2"], [data-motion="3"], [data-motion="4"]) .cd-cursor {
  display: none;
}

:is([data-motion="1"], [data-motion="2"]) .cd-sticker[data-spin]:before {
  animation: none;
}

[data-motion="1"] .cd-roll__s {
  transition: none;
}

html:is([data-motion="1"], [data-motion="2"]):active-view-transition-type(circle)::view-transition-old(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-fade-out;
}

html:is([data-motion="1"], [data-motion="2"]):active-view-transition-type(circle)::view-transition-new(root) {
  animation: var(--dur-page) var(--ease-in-out) both cd-vt-fade-in;
}

@keyframes cd-vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes cd-vt-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }

  [data-reveal], [data-reveal-group] > *, .cd-split__i, .cd-reveal-img, .cd-reveal-img > *, .cd-fill__w {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    translate: none !important;
    scale: none !important;
  }

  .cd-split[data-split="lines"] {
    opacity: 1 !important;
  }

  [data-scroll-type] {
    color: var(--ink) !important;
  }

  [data-progress] {
    scale: 1 !important;
  }

  .cd-menu {
    clip-path: none !important;
  }

  .cd-fab-menu__item {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  .cd-actionbar {
    opacity: 1 !important;
    translate: none !important;
  }

  .cd-grain, .cd-cursor, .cd-spotlight:before, .cd-hlist__float {
    display: none !important;
  }

  ::view-transition-group(*) {
    animation: none !important;
  }

  ::view-transition-old(*) {
    animation: none !important;
  }

  ::view-transition-new(*) {
    animation: none !important;
  }

  .cd-rotate__c, .cd-sbtn__face {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
  }

  .cd-sbtn__face.is-out {
    display: none;
  }

  .cd-mark.is-drawn {
    background-size: 100% 100% !important;
  }

  .cd-mark__svg path {
    stroke-dashoffset: 0 !important;
  }

  .cd-tl__rail {
    --tl-p: 1;
  }

  .cd-prox__c {
    --cd-p: 0 !important;
  }

  .cd-sp__panel .cd-sp__media.is-active {
    clip-path: inset(0) !important;
  }

  .cd-dir__over, .cd-cstack.is-ready > li {
    translate: none !important;
  }

  .cd-confetti, .cd-trail__layer, .cd-lens__glass {
    display: none !important;
  }

  .cd-wave[data-scroll] {
    animation: linear both cd-wave-read !important;
    animation-timeline: scroll() !important;
  }

  .cd-wave--indet .cd-wave__active {
    clip-path: inset(0 round 4px) !important;
    animation: 1.2s ease-in-out infinite alternate cd-wave-breathe !important;
  }

  .cd-dots {
    animation: 1.6s ease-in-out infinite alternate cd-dots-breathe !important;
  }

  .cd-dots:not([data-dm]) > i {
    opacity: .55 !important;
  }

  .cd-dots[data-dots="cuore"] > i:not([data-on]) {
    opacity: .12 !important;
  }

  .cd-sign path {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }

  .cd-ticket__main > * {
    translate: none !important;
  }

  .cd-hold.is-holding .cd-hold__fill {
    transition-duration: var(--cd-hold, 1.2s) !important;
  }
}

[data-theme="sanzini"] {
  --blu: oklch(42% .15 262);
  --blu-notte: oklch(24% .04 265);
  --smalto: oklch(97.2% .006 255);
  --stone: oklch(87.5% .028 85);
  --bg: var(--smalto);
  --surface: oklch(99.2% .003 255);
  --ink: var(--blu-notte);
  --ink-soft: oklch(44% .05 262);
  --accent: var(--blu);
  --accent-ink: var(--smalto);
  --border: oklch(82% .02 85);
  --success: oklch(50% .1 165);
  --success-soft: oklch(95% .035 165);
  --warning: oklch(52% .11 65);
  --warning-soft: oklch(95% .035 65);
  --danger: oklch(52% .17 25);
  --danger-soft: oklch(95% .035 25);
  --shadow-lift: 0 12px 24px oklch(24% .04 265 / .14);
  --shadow-float: 0 1px 2px oklch(24% .04 265 / .08), 0 18px 44px oklch(24% .04 265 / .18);
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --font-nastro: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --cd-display-weight: 600;
  --cd-btn-fill: var(--blu-notte);
  --cd-btn-fill-ink: var(--smalto);
  --cd-sticky-top: 108px;
  --scrim-from: oklch(20% .05 262 / .82);
  color-scheme: light;
}

.blu {
  background: var(--blu);
  color: var(--smalto);
  --ink: var(--smalto);
  --ink-soft: oklch(88% .035 262);
  --accent: var(--smalto);
  --accent-ink: var(--blu);
  --border: oklch(60% .11 262);
  --surface: oklch(46% .14 262);
  --cd-btn-fill: var(--blu-notte);
  --cd-btn-fill-ink: var(--smalto);
}

.stone {
  background: var(--stone);
}

html {
  scrollbar-color: var(--blu) var(--stone);
  scroll-padding-top: 110px;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  background: var(--blu);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--font-body);
  caret-color: var(--blu);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--blu);
  color: var(--smalto);
}

a {
  text-underline-offset: .2em;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

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

.salta {
  z-index: 100;
  background: var(--smalto);
  color: var(--blu);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  position: absolute;
  top: -100px;
  left: 1rem;
}

.salta:focus {
  top: 1rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--cd-display-weight);
  text-wrap: balance;
  letter-spacing: -.01em;
  font-stretch: 112%;
  line-height: 1.04;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  font-weight: 600;
  line-height: 1;
}

h1 em, .cd-hx__title em {
  font-style: italic;
  font-weight: 400;
}

h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

h3 {
  margin: 0 0 .4rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

p {
  text-wrap: pretty;
  margin: 0;
}

main p + p, .lead + p {
  margin-top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--cd-gutter), 74rem);
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2 * var(--cd-gutter), 44rem);
  margin-inline: auto;
}

.lead {
  color: var(--ink-soft);
  max-width: 38rem;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

.lead mark, .cd-mark {
  color: var(--ink);
}

.sez {
  padding-block: clamp(5rem, 11vw, 9rem);
  position: relative;
}

.sez--stretta {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.azioni {
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2rem;
  display: flex;
}

.testata {
  z-index: 30;
  border-bottom: 1px solid oklch(36% .13 262);
  position: sticky;
  top: 0;
}

.testata__in {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  display: flex;
}

.marchio {
  padding-block: 6px;
  display: block;
}

.marchio img {
  width: auto;
  height: 78px;
  display: block;
}

.nav {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.nav a {
  color: var(--smalto);
  font: 600 .8rem/1 var(--font-nastro);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  min-height: 44px;
  padding: 14px 10px;
  font-stretch: 112%;
  text-decoration: none;
  display: inline-flex;
}

.nav a:hover, .nav a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav .cd-menu-toggle {
  color: var(--smalto);
  background: none;
  border-color: oklch(60% .11 262);
  margin-left: .75rem;
}

@media (max-width: 960px) {
  .nav a {
    display: none;
  }
}

@media (max-width: 600px) {
  .marchio img {
    height: 62px;
  }

  .testata__in {
    min-height: 76px;
  }
}

.cd-menu.blu {
  background: var(--blu);
}

.cd-menu .cd-menu__list a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.cd-menu__foot a {
  color: inherit;
}

.cd-menu__list a {
  font-stretch: 112%;
}

.sz-pre {
  --pre-bg: var(--blu);
  --pre-ink: var(--smalto);
}

.sz-pre .cd-preloader__logo img {
  width: min(68vw, 420px);
  height: auto;
  display: block;
}

.sz-pre .cd-preloader__logo > span {
  animation: sz-traccia 1.2s var(--ease-out-expo) 50ms both;
}

@keyframes sz-traccia {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: .4;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

.apertura .cd-hx__stage {
  background: var(--blu);
}

.apertura .cd-hx__title {
  color: var(--smalto);
  letter-spacing: -.02em;
  max-width: 22ch;
  top: calc(var(--cd-gutter) + 92px);
  font-size: clamp(2.8rem, 6.2vw, 6rem);
  font-weight: 600;
  line-height: .98;
}

.apertura {
  --testata-h: 92px;
}

@media (max-width: 600px) {
  .apertura {
    --testata-h: 76px;
  }
}

.apertura .cd-hx__media img {
  object-position: 50% 6%;
  transform-origin: 50% 0;
}

.apertura .cd-hx__copy {
  max-width: 36rem;
  color: var(--smalto);
}

.apertura .cd-hx__copy p {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
}

.apertura .cd-hx__copy .cd-btn {
  margin-top: 1.5rem;
}

.capo {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  overflow: clip;
}

.capo__grid {
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
  display: grid;
}

.capo__foto {
  margin: 0;
}

.capo__foto img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  view-transition-class: cd-media;
  width: 100%;
  height: auto;
  display: block;
}

.briciole {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-size: .9rem;
}

.briciole a {
  color: inherit;
}

@media (max-width: 820px) {
  .capo__grid {
    grid-template-columns: 1fr;
  }

  .capo__foto img {
    aspect-ratio: 4 / 3;
    border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
  }
}

[data-nastro-zona] {
  isolation: isolate;
  position: relative;
}

[data-nastro-zona] > :not(svg) {
  z-index: 1;
  position: relative;
}

svg.nastro {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
}

svg.nastro path {
  fill: none;
  stroke: var(--blu);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  svg.nastro path {
    stroke-width: 2px;
  }
}

.lettera {
  max-width: 46rem;
}

.lettera h2 {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
}

.lettera .grande {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.45;
}

.num-grandi {
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 3rem;
  display: flex;
}

.num-grandi div {
  gap: .25rem;
  display: grid;
}

.num-grandi strong {
  font: 700 clamp(2.6rem, 5.4vw, 4rem)/1 var(--font-display);
  color: var(--blu);
  font-stretch: 125%;
}

.num-grandi span {
  color: var(--ink-soft);
  font-size: 1rem;
}

.giornata__fase {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.giornata__fase .wrap {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  display: grid;
}

.giornata__fase:nth-child(2n) .wrap {
  grid-template-columns: 1.1fr .9fr;
}

.giornata__fase:nth-child(2n) figure {
  order: 2;
}

.giornata__fase figure {
  margin: 0;
}

.giornata__fase img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  display: block;
}

.ora {
  font: 500 italic clamp(3.4rem, 8.5vw, 6.6rem)/.9 var(--font-display);
  margin: 0 0 1rem;
  font-stretch: 125%;
}

.giornata__fase p:not(.ora) {
  color: inherit;
  opacity: .92;
}

.giornata__fase .cd-open {
  margin-top: 1.5rem;
}

@media (max-width: 820px) {
  .giornata__fase .wrap, .giornata__fase:nth-child(2n) .wrap {
    grid-template-columns: 1fr;
  }

  .giornata__fase:nth-child(2n) figure {
    order: 0;
  }

  .giornata__fase img {
    aspect-ratio: 4 / 3;
  }
}

.nomi {
  border-block: 1px solid var(--border);
  gap: .5rem;
  padding-block: 2.5rem;
  display: grid;
  overflow: clip;
}

.nomi .cd-marquee {
  font: 600 clamp(2.6rem, 7.4vw, 6rem)/1.05 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--blu);
}

.nomi .cd-marquee--reverse {
  font-family: var(--font-body);
  text-transform: none;
  color: var(--ink-soft);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
}

.nomi .cd-marquee__track span {
  padding-inline: .4em;
}

.ventaglio {
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  display: grid;
}

.ventaglio .cd-fan {
  --fan-angle: 9deg;
  --fan-gap: 22%;
  min-height: 520px;
}

.ventaglio .cd-fan > figure {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  width: min(46%, 250px);
  margin: 0;
}

.ventaglio .cd-fan img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 820px) {
  .ventaglio {
    grid-template-columns: 1fr;
  }

  .ventaglio .cd-fan {
    min-height: 400px;
  }
}

.presnitz {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  display: grid;
}

.presnitz figure {
  margin: 0;
}

.presnitz figure img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  display: block;
}

.spirale-posto {
  aspect-ratio: 1;
  width: clamp(150px, 18vw, 230px);
  margin-bottom: 1.5rem;
}

.presnitz blockquote {
  border-top: 3px double var(--blu);
  margin: 2rem 0 0;
  padding-top: 1.25rem;
}

.presnitz blockquote p {
  font-size: 1.1rem;
}

.presnitz cite {
  color: var(--ink-soft);
  margin-top: .5rem;
  font-size: .9rem;
  font-style: normal;
  display: block;
}

@media (max-width: 820px) {
  .presnitz {
    grid-template-columns: 1fr;
  }

  .spirale-posto {
    width: 140px;
  }
}

.porte {
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  display: grid;
}

.porta {
  border-radius: var(--radius-lg);
  color: var(--smalto);
  isolation: isolate;
  min-height: 420px;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.porta:first-child, .porta:nth-child(4) {
  grid-column: span 7;
}

.porta:nth-child(2), .porta:nth-child(3) {
  grid-column: span 5;
}

.porta img {
  object-fit: cover;
  z-index: -2;
  width: 100%;
  height: 100%;
  transition: scale var(--dur-cinematic) var(--ease-out-expo);
  view-transition-class: cd-media;
  position: absolute;
  inset: 0;
}

.porta:after {
  content: "";
  z-index: -1;
  background: linear-gradient(to top, var(--scrim-from), transparent 65%);
  position: absolute;
  inset: 0;
}

.porta__testo {
  gap: .35rem;
  display: grid;
  position: absolute;
  inset: auto 1.5rem 1.5rem;
}

.porta__titolo {
  font: 700 clamp(1.5rem, 2.8vw, 2.25rem)/1.05 var(--font-display);
  font-stretch: 112%;
}

.porta__testo > span:nth-child(2) {
  color: oklch(93% .02 262);
  max-width: 30ch;
  font-size: 1rem;
}

.porta__freccia {
  font: 600 .85rem/1 var(--font-nastro);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  display: inline-flex;
}

@media (hover: hover) and (pointer: fine) {
  .porta:hover img {
    scale: 1.05;
  }
}

@media (max-width: 820px) {
  .porta, .porta:nth-child(n) {
    grid-column: span 12;
    min-height: 340px;
  }
}

.voto {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.5rem;
  display: flex;
}

.voto strong {
  font: 600 clamp(3.8rem, 9.5vw, 6.6rem)/.9 var(--font-display);
  font-stretch: 125%;
}

.voto span {
  color: var(--ink-soft);
}

.citazioni {
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem 4rem;
  display: grid;
}

.citazioni figure {
  margin: 0;
}

.citazioni blockquote {
  margin: 0 0 .75rem;
}

.citazioni .grande blockquote p {
  font: 500 clamp(1.5rem, 2.8vw, 2.25rem)/1.25 var(--font-display);
}

.citazioni .piccola blockquote p {
  font-size: 1.15rem;
}

.citazioni figcaption {
  color: var(--ink-soft);
  font-size: .95rem;
}

.citazioni .piccole {
  align-content: start;
  gap: 2rem;
  display: grid;
}

@media (max-width: 820px) {
  .citazioni {
    grid-template-columns: 1fr;
  }
}

.cartoncino {
  background: var(--surface);
  color: var(--blu-notte);
  box-shadow: var(--shadow-float);
  outline: 1px solid var(--blu);
  outline-offset: -12px;
  --ink: var(--blu-notte);
  --ink-soft: oklch(44% .05 262);
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.75rem);
  position: relative;
}

.cartoncino:after {
  content: "";
  border: 3px double var(--blu);
  pointer-events: none;
  opacity: .55;
  position: absolute;
  inset: 16px;
}

.cartoncino__testa {
  text-align: center;
  margin-bottom: 2rem;
}

.cartoncino__logo {
  width: min(15rem, 70%);
  height: auto;
  margin: 0 auto;
  display: block;
}

.cartoncino__testa h2 {
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blu-notte);
  margin: .9rem 0 0;
  font-size: clamp(.85rem, 1.6vw, 1rem);
}

.portate {
  gap: .95rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.portate li {
  align-items: baseline;
  gap: .6rem;
  display: flex;
}

.portate .voce {
  font-weight: 600;
}

.portate .guida, .anteprima .guida {
  border-bottom: 2px dotted var(--blu);
  flex: 1;
}

@supports (color: color-mix(in lab, red, red)) {
  .portate .guida, .anteprima .guida {
    border-bottom: 2px dotted color-mix(in oklab, var(--blu) 45%, transparent);
  }
}

.portate .guida, .anteprima .guida {
  min-width: 1.5rem;
  translate: 0 -.3em;
}

.portate .nota {
  color: var(--ink-soft);
  text-align: right;
  font-size: 1rem;
  font-style: italic;
}

.cartoncino__piede {
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  font-size: 1rem;
  display: grid;
}

.cartoncino__piede h3 {
  font-family: var(--font-nastro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blu);
  margin-bottom: .35rem;
  font-size: .75rem;
  font-stretch: 112%;
}

.cartoncino__piede p {
  color: var(--ink-soft);
}

.prezzo {
  text-align: center;
  color: var(--ink-soft);
  margin: 2rem 0 0;
  font-size: 1rem;
}

.prezzo strong {
  color: var(--blu);
  font: 700 1.5rem/1 var(--font-display);
  font-stretch: 125%;
}

@media (max-width: 560px) {
  .portate li {
    flex-wrap: wrap;
    gap: 0 .5rem;
  }

  .portate .guida {
    display: none;
  }

  .portate .nota {
    text-align: left;
    flex-basis: 100%;
  }

  .cartoncino__piede {
    grid-template-columns: 1fr;
  }
}

.percorso .cd-sp__text h3 {
  font-stretch: 112%;
}

.tappa {
  font: 700 .8rem/1 var(--font-nastro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu);
  font-stretch: 112%;
}

.regole {
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  display: grid;
}

.cd-steps h3 {
  font-size: 1.1rem;
}

.cd-steps p {
  color: var(--ink-soft);
}

.cd-steps__n {
  font-family: var(--font-display);
  font-stretch: 125%;
}

.spunte {
  gap: .6rem;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 1rem;
  list-style: none;
  display: grid;
}

.spunte li {
  align-items: baseline;
  gap: .6rem;
  display: flex;
}

.spunte .cd-icon {
  color: var(--blu);
  flex: none;
  translate: 0 .15em;
}

@media (max-width: 820px) {
  .regole {
    grid-template-columns: 1fr;
  }
}

.duo {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  display: grid;
}

.duo--inverso figure {
  order: 2;
}

.duo figure {
  margin: 0;
}

.duo figure img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  display: block;
}

.duo figcaption {
  color: var(--ink-soft);
  margin-top: .6rem;
  font-size: .9rem;
}

@media (max-width: 820px) {
  .duo {
    grid-template-columns: 1fr;
  }

  .duo--inverso figure {
    order: 0;
  }

  .duo figure img {
    aspect-ratio: 4 / 3;
  }
}

.mosaico {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mosaico .cd-gallery__item:first-child {
  grid-area: span 2 / span 2;
}

.mosaico .cd-gallery__item:nth-child(2) {
  aspect-ratio: 2;
  grid-column: span 2;
}

@media (max-width: 700px) {
  .mosaico {
    grid-template-columns: repeat(2, 1fr);
  }
}

.listino {
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.listino li {
  border-bottom: 1px solid var(--border);
  gap: .25rem;
  padding-bottom: 1.5rem;
  display: grid;
}

.listino h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.listino p {
  color: var(--ink-soft);
}

.orari {
  grid-template-columns: auto 1fr;
  gap: .4rem 1.5rem;
  margin: 1rem 0 0;
  font-size: 1rem;
  display: grid;
}

.orari dt {
  color: var(--ink-soft);
}

.orari dd {
  margin: 0;
}

.indirizzo {
  margin: 0 0 1rem;
  font-style: normal;
}

.chiusa h2 {
  max-width: 16ch;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
}

.storia .cd-tl__year {
  font-family: var(--font-display);
  color: var(--blu);
  white-space: nowrap;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-style: italic;
  font-weight: 600;
}

.preventivo__grid {
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  display: grid;
}

.anteprima {
  position: sticky;
  top: 116px;
}

.anteprima .cartoncino {
  padding: 2.5rem 2rem;
}

.anteprima .cartoncino__logo {
  width: 11rem;
}

.anteprima .cartoncino__testa {
  margin-bottom: 1.25rem;
}

.anteprima dl {
  gap: .5rem;
  margin: 0;
  font-size: 1rem;
  display: grid;
}

.anteprima dl div {
  align-items: baseline;
  gap: .5rem;
  display: flex;
}

.anteprima dt {
  flex: 1;
  gap: .5rem;
  font-weight: 600;
  display: flex;
}

.anteprima dt:after {
  content: "";
  border-bottom: 2px dotted var(--blu);
  flex: 1;
}

@supports (color: color-mix(in lab, red, red)) {
  .anteprima dt:after {
    border-bottom: 2px dotted color-mix(in oklab, var(--blu) 45%, transparent);
  }
}

.anteprima dt:after {
  translate: 0 -.3em;
}

.anteprima dd {
  color: var(--ink-soft);
  text-align: right;
  margin: 0;
}

.anteprima dd.vuoto {
  font-style: italic;
}

.intestazione {
  font-family: var(--font-display);
  color: var(--blu-notte);
  text-align: center;
  min-height: 1.3em;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 112%;
}

.two {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.check {
  color: var(--ink-soft);
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  display: flex;
}

.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--blu);
  flex: none;
  margin: 3px 0 0;
}

.form-nota {
  color: var(--ink-soft);
  margin-top: 1rem;
  font-size: .95rem;
}

@media (max-width: 900px) {
  .preventivo__grid {
    grid-template-columns: 1fr;
  }

  .anteprima {
    order: -1;
    position: static;
  }
}

@media (max-width: 520px) {
  .two {
    grid-template-columns: 1fr;
  }
}

.piede {
  background: var(--blu);
  color: var(--smalto);
  min-height: min(calc(var(--cd-vh) * .85), 640px);
  --ink-soft: oklch(88% .035 262);
  padding-inline: 0;
  font-size: 1rem;
}

.piede__grid {
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2rem;
  display: grid;
}

.piede h2 {
  font-family: var(--font-nastro);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-stretch: 112%;
}

.piede p {
  margin: 0 0 .4rem;
}

.piede__logo {
  width: 11rem;
  height: auto;
  margin-bottom: 1rem;
  display: block;
}

.piede__link {
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.piede__link a {
  align-items: center;
  min-height: 44px;
  display: inline-flex;
}

.piede__link {
  gap: 0;
}

.piede .cd-footer__mark {
  padding-inline: var(--cd-gutter);
  letter-spacing: -.02em;
  color: oklch(52% .15 262);
  font-size: clamp(4rem, 12vw, 10rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 700px), (max-height: 640px) {
  .cd-footer.piede {
    position: relative;
  }
}

@media (max-width: 860px) {
  .piede__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .piede__grid {
    grid-template-columns: 1fr;
  }

  .piede {
    min-height: auto;
  }
}

.cd-faq h2 {
  margin-bottom: 1.5rem;
}

@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
  @media (prefers-reduced-motion: no-preference) {
    :is([data-motion="4"], [data-motion="5"]) .apertura .cd-hx__media {
      animation-name: sz-hx-clip;
    }

    :is([data-motion="4"], [data-motion="5"]) .apertura .cd-hx__stage {
      top: var(--testata-h);
      height: calc(var(--cd-vh) - var(--testata-h));
    }

    :is([data-motion="4"], [data-motion="5"]) .apertura .cd-hx__title {
      top: 22%;
      transform: translateY(-50%);
    }
  }
}

@keyframes sz-hx-clip {
  from {
    clip-path: inset(44% 16% 6% 16% round var(--radius-lg));
  }

  to {
    clip-path: inset(0);
  }
}

.mosaico .cd-gallery__item:nth-child(7):last-child {
  aspect-ratio: 2;
  grid-column: span 2;
}

.percorso.cd-sp.is-panel .cd-sp__step {
  opacity: .85;
}

.percorso.cd-sp.is-panel .cd-sp__step.is-active {
  opacity: 1;
}

.percorso .cd-sp__text p:not(.tappa) {
  color: var(--ink);
}

.lettera p:not(.grande) {
  max-width: 36rem;
}

.cd-over {
  overflow-x: clip;
}

.cd-line {
  margin-block: -.16em;
  padding-block: .16em;
}

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

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

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

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

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

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

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

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

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

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

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

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

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

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

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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