:root {
      --paper: #f7f5f0;
      --panel: #fffdf9;
      --ink: #202528;
      --muted: #697277;
      --line: #ddd8cf;
      --top: #91b852;
      --heart: #e978aa;
      --base: #a66d35;
      --blue: #4c7df0;
      --violet: #7f6cf5;
      --shadow: 0 18px 50px rgba(35, 31, 25, .11);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body[data-hydrated="false"] main,
    body[data-hydrated="false"] .continuation-board {
      opacity: 0;
      visibility: hidden;
    }

    body[data-hydrated="true"] main,
    body[data-hydrated="true"] .continuation-board {
      opacity: 1;
      visibility: visible;
      transition: opacity .18s ease;
    }

    button,
    select {
      font: inherit;
    }

    .board-shell {
      display: grid;
      grid-template-rows: 1fr;
      min-height: 0;
      padding: 14px;
      gap: 12px;
    }

    .perfume-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      max-width: 1480px;
      margin: 0 auto 8px;
      padding: 0 4px;
      color: #687176;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .perfume-breadcrumb a {
      color: #48535a;
      text-decoration: none;
    }

    .perfume-breadcrumb a:hover {
      color: #305cf7;
    }

    .perfume-breadcrumb span {
      min-width: 0;
    }

    .perfume-breadcrumb__sep {
      color: #a2a9ad;
      font-weight: 500;
    }

    .board-topbar {
      display: none;
      grid-template-columns: auto minmax(0, 1fr) minmax(240px, 360px);
      align-items: center;
      gap: 14px;
      min-height: 46px;
      padding: 0 12px;
    }

    .board-kicker,
    .panel-number {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(255, 255, 255, .68);
      font-weight: 800;
      font-size: 13px;
    }

    .board-title {
      min-width: 0;
      display: flex;
      gap: 10px;
      align-items: baseline;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 13px;
      font-weight: 800;
    }

    .board-title span {
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
    }

    .profile-select {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      padding: 8px 10px;
    }

    .concept-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: minmax(420px, .98fr) minmax(320px, .9fr) auto;
      gap: 12px;
      min-height: min(980px, calc(100vh - 140px));
    }

    .site-content {
      position: relative;
      z-index: 1;
      padding-top: 18px;
    }

    .concept-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 253, 249, .9);
      box-shadow: var(--shadow);
    }

    .pyramid-card-panel {
      display: grid;
      grid-template-columns: 212px minmax(0, 1fr);
      grid-column: 1;
      grid-row: 1;
      padding-top: 38px;
    }

    .panel-label {
      position: absolute;
      z-index: 4;
      top: 16px;
      left: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-size: 13px;
      font-weight: 800;
    }

    .panel-label--scene {
      align-items: center;
      max-width: none;
      line-height: 1.12;
      text-shadow: 0 1px 0 rgba(255,255,255,.55);
    }

    .panel-label--scene .panel-number {
      flex: 0 0 auto;
    }

    .panel-label--scene span:last-child {
      display: block;
      white-space: nowrap;
      text-shadow: 0 1px 0 rgba(255,255,255,.55);
    }

    .panel-label--scene span:last-child br {
      display: none;
    }

    .product-panel {
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr auto auto;
      gap: 18px;
      padding: 22px 18px;
      background: rgba(255, 253, 249, .78);
      min-width: 0;
    }

    .product-panel::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background: var(--line);
    }

    .product-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: start;
    }

    .product-index {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .save-mark {
      width: 16px;
      height: 22px;
      background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22' fill='none'%3E%3Cpath d='M3 2.2H13V19.1L8 15.5L3 19.1V2.2Z' stroke='%238d969a' stroke-width='1.55' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }

    .save-mark::after {
      content: none;
    }

    .product-name h1 {
      margin: 0;
      font-size: clamp(20px, 1.65vw, 28px);
      line-height: 1;
      letter-spacing: .02em;
      text-transform: uppercase;
      overflow-wrap: normal;
    }

    .product-name p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .product-name p + p {
      margin-top: 6px;
      color: #495256;
      font-size: 11px;
      line-height: 1.35;
    }

    .bottle-wrap {
      display: grid;
      place-items: center;
      min-height: 210px;
    }

    .bottle {
      position: relative;
      width: min(92px, 48%);
      aspect-ratio: 4 / 6;
      border: 1px solid rgba(80, 74, 64, .22);
      border-radius: 7px 7px 10px 10px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.74), rgba(255,255,255,.08) 23%, rgba(230,194,102,.2) 48%, rgba(255,255,255,.34) 70%, rgba(160,126,64,.2)),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,218,154,.52));
      box-shadow: 0 18px 28px rgba(75, 64, 44, .18);
    }

    .bottle.has-photo {
      width: min(98px, 66%);
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: zoom-in;
      transform-origin: 50% 62%;
      transition: transform .18s ease, filter .18s ease;
      will-change: transform;
      contain: paint;
      backface-visibility: hidden;
    }

    .bottle.has-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      pointer-events: none;
    }

    .bottle-wrap:hover .bottle.has-photo {
      transform: scale(1.22);
      filter: drop-shadow(0 18px 22px rgba(31,37,40,.16));
    }

    .bottle-preview-popover {
      position: fixed;
      z-index: 1000;
      width: min(286px, calc(100vw - 32px));
      height: min(430px, calc(100vh - 36px));
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 10px;
      padding: 18px 18px 14px;
      border: 1px solid rgba(80,74,64,.16);
      border-radius: 8px;
      background: rgba(255,253,249,.96);
      box-shadow: 0 28px 72px rgba(35,31,25,.22);
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px) scale(.98);
      transition: opacity .16s ease, transform .16s ease;
      backdrop-filter: blur(12px);
    }

    .bottle-preview-popover[data-visible="true"] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .bottle-preview-popover img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .bottle-preview-caption {
      display: grid;
      gap: 5px;
      padding-top: 10px;
      border-top: 1px solid rgba(80,74,64,.14);
      text-align: center;
    }

    .bottle-preview-brand,
    .bottle-preview-name {
      color: #3d4448;
      text-transform: uppercase;
    }

    .bottle-preview-brand {
      color: #122536;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .075em;
    }

    .bottle-preview-name {
      color: #626b70;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .045em;
      line-height: 1.25;
    }

    .bottle::before {
      content: "";
      position: absolute;
      left: 32%;
      right: 32%;
      top: -40px;
      height: 39px;
      border-radius: 4px 4px 2px 2px;
      background:
        linear-gradient(90deg, #111, #292929 45%, #0a0a0a);
      box-shadow: 0 6px 0 rgba(40, 34, 24, .22);
    }

    .bottle::after {
      content: attr(data-label);
      position: absolute;
      left: 14%;
      right: 14%;
      top: 38%;
      min-height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(80, 74, 64, .12);
      background: rgba(255,255,255,.42);
      color: #4a453d;
      font-size: 8px;
      font-weight: 800;
      text-align: center;
      letter-spacing: .08em;
    }

    .bottle.has-photo::before,
    .bottle.has-photo::after {
      content: none;
    }

    .about-button,
    .layer-button {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      font-weight: 700;
      cursor: pointer;
    }

    .concentration {
      display: grid;
      gap: 8px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      color: var(--muted);
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dots i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #1f2528;
      opacity: var(--o);
    }

    .living-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      min-width: 0;
      position: relative;
      background: #fffdf9;
    }

    .pyramid-zone {
      min-width: 0;
      display: grid;
      grid-column: 1;
      grid-row: 1;
      grid-template-rows: 1fr auto;
      background: transparent;
    }

    .hero-animatic {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      min-height: 0;
      height: 100%;
      background: transparent;
    }

    .hero-animatic[hidden] {
      display: none;
    }

    .hero-animatic__media {
      position: relative;
      min-height: 0;
      height: 100%;
      width: 100%;
      max-width: none;
      aspect-ratio: auto;
      align-self: center;
      justify-self: center;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.98), rgba(255,255,255,0) 54%),
        linear-gradient(180deg, rgba(247, 239, 218, .98), rgba(255, 253, 248, .72) 45%, rgba(209, 195, 174, .98));
    }

    .hero-animatic__media img,
    .hero-animatic__media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--hero-animatic-position, 50% 50%);
      display: block;
    }

    .hero-animatic__media img[hidden],
    .hero-animatic__media video[hidden] {
      display: none;
    }

    .hero-animatic__media video {
      opacity: 1;
      transition: opacity .18s ease;
    }

    .hero-animatic.is-loading-video .hero-animatic__media video {
      opacity: 0;
    }

    .hero-animatic__strip {
      position: absolute;
      inset: 0;
      display: block;
      background-image: var(--hero-animatic-strip);
      background-repeat: no-repeat;
      background-size:
        calc(var(--hero-animatic-columns, var(--hero-animatic-frames, 1)) * 100%)
        calc(var(--hero-animatic-rows, 1) * 100%);
      background-position: var(--hero-animatic-frame-x, 0%) var(--hero-animatic-frame-y, 0%);
      opacity: 1;
      will-change: background-position;
    }

    .hero-animatic__strip[hidden] {
      display: none;
    }

    .hero-animatic__media video[hidden] {
      display: none;
    }

    .hero-animatic__controls {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      padding: 20px 56px 12px 18px;
      background: transparent;
    }

    .hero-animatic__button {
      min-width: 30px;
      width: 30px;
      height: 28px;
      padding: 0;
      font-size: 0;
      border: 1px solid rgba(31,37,40,.18);
      border-radius: 3px;
      background: rgba(255,255,255,.72);
      color: rgba(31,37,40,.64);
      box-shadow: none;
      cursor: pointer;
    }

    .hero-animatic__button::before {
      content: "";
      display: inline-block;
      margin: 0 auto;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 10px solid currentColor;
      transform: translateX(1px);
    }

    .hero-animatic__button[data-active="true"]::before {
      width: 12px;
      height: 14px;
      border: 0;
      background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
      transform: none;
    }

    .hero-animatic__range {
      align-self: center;
      position: relative;
      height: 16px;
      cursor: pointer;
    }

    .hero-animatic__range::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(31,37,40,.58), rgba(31,37,40,.16) 100%);
    }

    .hero-animatic__range span {
      position: absolute;
      left: var(--x);
      top: -15px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .hero-animatic__range span:first-child {
      transform: none;
    }

    .hero-animatic__range span:nth-child(4) {
      transform: translateX(-100%);
    }

    .hero-animatic__range i {
      position: absolute;
      left: var(--time-pct, 16.66%);
      top: 50%;
      width: 11px;
      height: 11px;
      border: 2px solid #1f2528;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 5px rgba(31,37,40,.14);
      transform: translate(-50%, -50%);
    }

    #livePyramid {
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .card-pyramid,
    .card-pyramid .ulnay-pyramid,
    .card-pyramid .ulnay-pyramid__shell,
    .card-pyramid .ulnay-pyramid__stack,
    .card-pyramid .ulnay-pyramid__main {
      height: 100%;
      min-height: 0;
    }

    .card-pyramid .ulnay-pyramid__shell,
    .card-pyramid .ulnay-pyramid__stack {
      display: block;
    }

    .card-pyramid .ulnay-pyramid__main {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
    }

    .card-pyramid .ulnay-pyramid__tabs,
    .card-pyramid .ulnay-pyramid__head,
    .card-pyramid .ulnay-pyramid__timeline,
    .card-pyramid .ulnay-pyramid__comparison,
    .card-pyramid .ulnay-pyramid__panel {
      display: none;
    }

    .card-pyramid .ulnay-pyramid__stage {
      min-height: 0;
      aspect-ratio: auto;
      background: transparent;
      mix-blend-mode: normal;
    }

    .card-pyramid .ulnay-pyramid canvas {
      transform: scale(.9);
      transform-origin: 50% 48%;
      filter: saturate(1.28) contrast(1.14) brightness(1.04);
    }

    .card-pyramid .ulnay-pyramid__controls {
      grid-template-columns: 30px minmax(0, 1fr);
      position: relative;
      gap: 22px;
      align-items: center;
      padding: 20px 56px 12px 18px;
      border-top: 0;
      background: transparent;
    }

    .card-pyramid .ulnay-pyramid__button {
      min-width: 30px;
      width: 30px;
      height: 28px;
      grid-column: 1;
      grid-row: 1;
      padding: 0;
      font-size: 0;
      border-color: rgba(31,37,40,.18);
      border-radius: 3px;
      background: rgba(255,255,255,.72);
      color: rgba(31,37,40,.64);
      box-shadow: none;
    }

    .card-pyramid .ulnay-pyramid__button::before {
      content: "";
      display: inline-block;
      margin: 0 auto;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 10px solid currentColor;
      transform: translateX(1px);
    }

    .card-pyramid .ulnay-pyramid__button[data-active="true"]::before {
      width: 12px;
      height: 14px;
      border: 0;
      background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
      transform: none;
    }

    .card-pyramid .ulnay-pyramid input[type="range"] {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      z-index: 3;
      display: none;
      height: 24px;
      accent-color: #7e914c;
      background: transparent;
      appearance: none;
      -webkit-appearance: none;
      opacity: 0;
      cursor: pointer;
    }

    #livePyramid [data-time] {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      opacity: 0 !important;
    }

    .card-pyramid .ulnay-pyramid__range-visual {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      position: relative;
      z-index: 1;
      display: block;
      height: 16px;
      pointer-events: auto;
      cursor: pointer;
    }

    .card-pyramid .ulnay-pyramid__range-visual::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      transform: translateY(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(31,37,40,.74), rgba(31,37,40,.28) 100%);
      box-shadow: 0 1px 2px rgba(31,37,40,.08);
    }

    .card-pyramid .ulnay-pyramid__range-visual span {
      position: absolute;
      left: var(--x);
      top: -15px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .card-pyramid .ulnay-pyramid__range-visual span:first-child {
      transform: none;
    }

    .card-pyramid .ulnay-pyramid__range-visual span:nth-child(4) {
      transform: translateX(-100%);
    }

    .card-pyramid .ulnay-pyramid__range-visual i {
      position: absolute;
      left: var(--time-pct, 16.66%);
      top: 50%;
      width: 11px;
      height: 11px;
      border: 2px solid #1f2528;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 5px rgba(31,37,40,.14);
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    .card-pyramid .ulnay-pyramid__controls::before {
      content: none;
      position: absolute;
      left: 70px;
      top: 2px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .card-pyramid .ulnay-pyramid__controls::after {
      content: none;
      position: absolute;
      right: 56px;
      top: 2px;
      color: var(--muted);
      word-spacing: 34px;
      font-size: 10px;
      font-weight: 700;
    }

    .card-pyramid .ulnay-pyramid input[type="range"]::-webkit-slider-runnable-track {
      height: 1px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(31,37,40,.58), rgba(31,37,40,.18) 100%);
    }

    .card-pyramid .ulnay-pyramid input[type="range"]::-webkit-slider-thumb {
      width: 11px;
      height: 11px;
      margin-top: -5px;
      border: 2px solid #1f2528;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 5px rgba(31,37,40,.14);
      appearance: none;
      -webkit-appearance: none;
    }

    .card-pyramid .ulnay-pyramid input[type="range"]::-moz-range-track {
      height: 1px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(31,37,40,.58), rgba(31,37,40,.18) 100%);
    }

    .card-pyramid .ulnay-pyramid input[type="range"]::-moz-range-progress {
      height: 1px;
      border-radius: 999px;
      background: rgba(31,37,40,.5);
    }

    .card-pyramid .ulnay-pyramid input[type="range"]::-moz-range-thumb {
      width: 11px;
      height: 11px;
      border: 2px solid #1f2528;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 5px rgba(31,37,40,.14);
    }

    .card-pyramid .ulnay-pyramid__time {
      display: none;
    }

    .pyramid-clock {
      position: absolute;
      z-index: 5;
      top: 14px;
      right: 118px;
      width: 62px;
      height: 62px;
      padding: 0;
      display: grid;
      place-items: center;
      overflow: visible;
      border: 1px solid rgba(202, 199, 190, .92);
      border-radius: 50%;
      background:
        radial-gradient(circle, #fff 0 56%, rgba(255,253,249,.75) 57%),
        repeating-conic-gradient(from -3deg, rgba(31,37,40,.42) 0 1.8deg, transparent 1.8deg 30deg),
        repeating-conic-gradient(from -3deg, rgba(125,132,134,.45) 0 1.2deg, transparent 1.2deg 6deg);
      color: transparent;
      font-size: 0;
      line-height: 0;
      box-shadow: 0 7px 18px rgba(35,31,25,.08), inset 0 0 0 6px rgba(255,255,255,.72);
    }

    .pyramid-clock::before {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(31,37,40,.14);
      border-radius: 50%;
    }

    .pyramid-clock__hand {
      position: absolute;
      left: 50%;
      bottom: 50%;
      width: 3px;
      border-radius: 999px;
      background: #1f2528;
      transform-origin: 50% 100%;
      box-shadow: 0 0 0 1px rgba(255,255,255,.45);
    }

    .pyramid-clock__hand--hour {
      height: 16px;
      transform: translateX(-50%) rotate(var(--hour-angle, 225deg));
    }

    .pyramid-clock__hand--minute {
      height: 24px;
      transform: translateX(-50%) rotate(var(--minute-angle, 180deg));
      width: 2px;
      background: #111719;
    }

    .pyramid-clock__pin {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #1f2528;
      transform: translate(-50%, -50%);
    }

    .pyramid-clock__num {
      position: absolute;
      color: rgba(31,37,40,.68);
      font-size: 8px;
      line-height: 1;
      font-weight: 800;
    }

    .pyramid-clock__num--12 {
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
    }

    .pyramid-clock__num--3 {
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
    }

    .pyramid-clock__num--6 {
      bottom: 7px;
      left: 50%;
      transform: translateX(-50%);
    }

    .pyramid-clock__num--9 {
      left: 7px;
      top: 50%;
      transform: translateY(-50%);
    }

    .notes-legend {
      position: absolute;
      z-index: 6;
      top: 0;
      right: 0;
      bottom: 0;
      width: 176px;
      display: grid;
      align-content: center;
      gap: 30px;
      padding: 18px 14px 18px 0;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42));
      pointer-events: none;
    }

    .legend-group {
      display: grid;
      grid-template-columns: 12px 1fr;
      gap: 10px;
      align-items: start;
      font-size: 10px;
      line-height: 1.25;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--c);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--c), white 76%);
    }

    .legend-group strong {
      display: block;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 9px;
    }

    .legend-group span,
    .legend-group a {
      display: inline;
      margin: 0;
      color: #303639;
      text-decoration: none;
    }

    .legend-terms {
      display: block;
      line-height: 1.28;
    }

    .legend-separator {
      color: rgba(48,54,57,.54);
    }

    .legend-group a:hover {
      text-decoration: underline;
    }

    .timeline-panel,
    .world-panel,
    .compare-panel {
      padding: 20px;
    }

    .timeline-panel {
      grid-column: 2;
      grid-row: 1;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
      min-width: 0;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 32px;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-size: 12px;
      font-weight: 800;
    }

    .panel-head-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .timeline-scale {
      display: grid;
      grid-template-columns: minmax(104px, .2fr) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      padding-top: 22px;
      height: 100%;
    }

    .big-play {
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 50%;
      background: #181d20;
      color: #fff;
      display: grid;
      place-items: center;
    }

    .big-play::before {
      content: "";
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 14px solid currentColor;
      transform: translateX(2px);
    }

    .timeline-rows {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      align-content: stretch;
      height: 100%;
      min-height: 0;
    }

    #timelineRows {
      display: grid;
      grid-template-rows: repeat(3, minmax(62px, 1fr));
      min-height: 0;
    }

    .time-axis {
      position: relative;
      height: 24px;
      color: var(--muted);
      font-size: 12px;
    }

    .time-axis::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      border-top: 1px solid #bfc3c4;
    }

    .time-axis span {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      font-weight: 700;
    }

    .time-marker {
      position: absolute;
      z-index: 6;
      top: 0;
      bottom: -244px;
      left: var(--x);
      width: 2px;
      background: linear-gradient(180deg, rgba(31,37,40,.58), rgba(31,37,40,.34));
      box-shadow: 0 0 0 1px rgba(255,255,255,.82);
      pointer-events: none;
    }

    .phase-row {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 14px;
      align-items: center;
      min-height: 0;
    }

    .phase-label {
      display: grid;
      gap: 3px;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 800;
      color: var(--c);
    }

    .phase-label small {
      color: var(--muted);
      font-weight: 600;
    }

    .phase-track {
      position: relative;
      height: 100%;
      min-height: 62px;
      overflow: hidden;
      border-left: 1px solid #d7d9d8;
      background: linear-gradient(90deg, color-mix(in srgb, var(--c), white 80%), color-mix(in srgb, var(--c), white 92%) var(--w), rgba(255,255,255,0) 100%);
    }

    .phase-track::before {
      content: none;
    }

    .phase-track::after {
      content: none;
    }

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

    .phase-curve__area {
      fill: color-mix(in srgb, var(--c), transparent 74%);
    }

    .phase-curve__line {
      fill: none;
      stroke: var(--c);
      stroke-width: 1.55;
      vector-effect: non-scaling-stroke;
    }

    .phase-curve__dots {
      display: none;
    }

    .timeline-note-orb {
      position: absolute;
      z-index: 2;
      left: var(--x);
      top: var(--y);
      width: var(--s);
      height: var(--s);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.96) 0 12%, rgba(255,255,255,.5) 18%, rgba(255,255,255,0) 36%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c), white 34%), var(--c) 62%, color-mix(in srgb, var(--c), #1f2528 10%) 100%);
      box-shadow:
        0 3px 9px color-mix(in srgb, var(--c), transparent 62%),
        inset -1px -2px 4px rgba(31,37,40,.12),
        inset 2px 2px 4px rgba(255,255,255,.46);
      opacity: min(1, calc(var(--a, .9) + .22));
    }

    .timeline-note-orb::after {
      content: "";
      position: absolute;
      left: 16%;
      top: 13%;
      width: 28%;
      height: 24%;
      border-radius: 50%;
      background: rgba(255,255,255,.66);
      filter: blur(.4px);
    }

    .timeline-note-orb--dust {
      width: calc(var(--s) * .42);
      height: calc(var(--s) * .42);
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.86) 0 16%, rgba(255,255,255,0) 42%),
        radial-gradient(circle, color-mix(in srgb, var(--c), white 20%), var(--c) 72%, transparent 100%);
      box-shadow: 0 2px 6px color-mix(in srgb, var(--c), transparent 66%);
      opacity: min(.72, calc(var(--a, .5) + .16));
    }

    .timeline-note-orb--dust::after {
      content: none;
    }

    .timeline-scale {
      grid-template-columns: minmax(132px, .22fr) minmax(0, 1fr);
      align-items: stretch;
      padding-top: 18px;
    }

    .timeline-legend {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 8px;
      padding-top: 46px;
      border-right: 1px solid rgba(221,216,207,.86);
    }

    .timeline-legend__group {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 8px;
      align-content: start;
      min-width: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .timeline-legend__group i {
      width: 9px;
      height: 9px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--c);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--c), white 76%);
    }

    .timeline-legend__group strong {
      display: block;
      margin-bottom: 6px;
      color: color-mix(in srgb, var(--c), #1f2528 20%);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 10px;
    }

    .timeline-legend__group span,
    .timeline-legend__group a {
      display: inline;
      min-width: 0;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      line-height: 1.15;
      color: #303639;
      font-size: 10px;
      text-decoration: none;
    }

    .timeline-legend__group a:hover {
      text-decoration: underline;
    }

    .timeline-graph {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 10px;
      min-width: 0;
      min-height: 0;
    }

    .timeline-graph .time-axis {
      margin: 0 34px 0 66px;
    }

    .timeline-rows {
      display: grid;
      grid-template-rows: repeat(3, minmax(64px, 1fr));
      gap: 0;
      height: auto;
      min-height: 0;
    }

    #timelineRows {
      display: grid;
      grid-template-rows: repeat(3, minmax(64px, 1fr));
      min-height: 0;
      border: 1px solid rgba(221,216,207,.72);
      border-radius: 8px;
      overflow: hidden;
      background:
        repeating-linear-gradient(90deg, transparent 0 19.8%, rgba(31,37,40,.07) 20% 20.15%, transparent 20.3% 25%),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
    }

    .phase-row {
      grid-template-columns: 58px minmax(0, 1fr) 28px;
      gap: 8px;
      padding: 0;
      border-bottom: 1px solid rgba(221,216,207,.62);
    }

    .phase-row:last-child {
      border-bottom: 0;
    }

    .phase-track {
      border-left: 1px solid #d7d9d8;
      background: linear-gradient(90deg, color-mix(in srgb, var(--c), white 80%), color-mix(in srgb, var(--c), white 92%) var(--w), rgba(255,255,255,0) 100%);
    }

    .phase-scale {
      align-self: center;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-align: right;
    }

    .timeline-copy {
      min-height: 42px;
      display: grid;
      align-content: center;
      padding: 8px 10px;
      border: 1px solid rgba(221,216,207,.72);
      border-radius: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      background: rgba(255,255,255,.46);
    }

    .clock-button {
      width: 40px;
      height: 40px;
      align-self: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      display: grid;
      place-items: center;
      font-weight: 800;
    }

    .world-panel {
      display: grid;
      grid-template-columns: 170px 1fr;
      grid-column: 1;
      grid-row: 2;
      gap: 0;
      padding: 0;
      min-width: 0;
    }

    .world-stats {
      display: grid;
      align-content: start;
      gap: 18px;
      padding: 58px 16px 22px;
      border-right: 1px solid var(--line);
    }

    .dial {
      width: 116px;
      height: 116px;
      margin: 0 auto;
      border: 1px solid #d8d8d4;
      border-radius: 50%;
      background:
        radial-gradient(circle, #fff 0 58%, transparent 59%),
        repeating-conic-gradient(from -5deg, #a7abad 0 2deg, transparent 2deg 15deg);
      position: relative;
    }

    .dial::before,
    .dial::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 4px;
      transform-origin: 50% 0;
      background: #1f2528;
      border-radius: 999px;
    }

    .dial::before {
      height: 36px;
      transform: rotate(235deg);
    }

    .dial::after {
      height: 48px;
      transform: rotate(58deg);
    }

    .world-stat {
      display: grid;
      gap: 7px;
      font-size: 12px;
      color: var(--muted);
    }

    .world-stat strong,
    .world-stat em {
      display: block;
    }

    .world-stat em {
      color: var(--ink);
      font-style: normal;
      font-weight: 800;
      line-height: 1.25;
    }

    .meter-line,
    .vote-track {
      --segments: 7;
      height: 8px;
      display: grid;
      grid-template-columns: repeat(var(--segments), minmax(0, 1fr));
      gap: 3px;
    }

    .vote-track {
      height: 9px;
    }

    .meter-segment {
      position: relative;
      display: block;
      height: 100%;
      border-radius: 999px;
      background: #e8e6df;
      overflow: hidden;
    }

    .meter-segment::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, color-mix(in srgb, var(--c), white 26%), color-mix(in srgb, var(--c), white 8%));
      opacity: 0;
    }

    .meter-segment[data-fill="full"]::before {
      opacity: 1;
    }

    .meter-segment[data-fill="partial"]::before {
      opacity: 1;
      clip-path: inset(0 calc(100% - var(--part)) 0 0 round 999px);
    }

    .world-image {
      position: relative;
      min-height: 250px;
      background: #eee8dc;
    }

    .world-image::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0 0 auto 0;
      height: 56px;
      background: linear-gradient(180deg, rgba(255,253,249,.9) 0%, rgba(255,253,249,.58) 58%, rgba(255,253,249,0) 100%);
      pointer-events: none;
    }

    .world-panel[data-expanded="true"] {
      position: fixed;
      z-index: 100010;
      inset: var(--world-expanded-top, 14px) 14px var(--world-expanded-bottom, 14px) 14px;
      grid-template-columns: 190px 1fr;
    }

    .world-expanded-open,
    .world-expanded-open body {
      overflow: hidden;
    }

    .world-actions {
      position: absolute;
      z-index: 2;
      right: 16px;
      top: 18px;
      display: grid;
      gap: 8px;
    }

    .world-action {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(214, 209, 198, .92);
      border-radius: 8px;
      background: rgba(255,255,255,.84);
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(35,31,25,.08);
    }

    .world-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .world-image::after {
      content: none;
    }

    .world-legend {
      display: grid;
      gap: 11px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .world-legend span {
      display: flex;
      gap: 9px;
      align-items: center;
    }

    .world-legend i {
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--c);
    }

    .compare-panel {
      display: grid;
      grid-column: 2;
      grid-row: 2;
      grid-template-rows: auto 1fr;
      gap: 14px;
      min-width: 0;
    }

    .compare-content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
      gap: 18px;
      min-height: 0;
      align-items: stretch;
    }

    .compare-side {
      display: grid;
      grid-template-rows: 48px 78px minmax(96px, 1fr);
      gap: 10px;
      min-width: 0;
    }

    .compare-perfume {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(221,216,207,.8);
    }

    .compare-flacon {
      width: 24px;
      height: 34px;
      justify-self: center;
      border: 1px solid rgba(80,74,64,.2);
      border-radius: 4px 4px 6px 6px;
      background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(232,202,130,.45), rgba(255,255,255,.45));
      position: relative;
    }

    .compare-flacon.has-photo {
      width: 30px;
      height: 42px;
      border: 0;
      border-radius: 0;
      background: transparent;
      cursor: zoom-in;
      transform-origin: 50% 75%;
      transition: transform .18s ease, filter .18s ease;
      contain: paint;
      backface-visibility: hidden;
    }

    .compare-flacon.has-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      pointer-events: none;
    }

    .compare-flacon.has-photo:hover {
      transform: scale(1.55);
      filter: drop-shadow(0 10px 14px rgba(31,37,40,.16));
    }

    .compare-flacon::before {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: -10px;
      height: 10px;
      border-radius: 2px;
      background: #171b1d;
    }

    .compare-flacon.has-photo::before {
      content: none;
    }

    .compare-curve__label {
      position: absolute;
      left: 8px;
      color: rgba(31,37,40,.52);
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .compare-curve__value {
      position: absolute;
      right: 8px;
      color: rgba(31,37,40,.7);
      font-size: 10px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .compare-curve__label--sillage {
      top: 7px;
    }

    .compare-curve__label--longevity {
      bottom: 7px;
    }

    .compare-curve__value--sillage {
      top: 7px;
    }

    .compare-curve__value--longevity {
      bottom: 7px;
    }

    .compare-perfume strong,
    .compare-perfume a,
    .compare-perfume span {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .compare-perfume strong {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .compare-perfume a {
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      text-decoration: none;
    }

    .compare-perfume a:hover {
      text-decoration: underline;
    }

    .compare-perfume span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .compare-curve {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #dedbd3;
      background:
        linear-gradient(180deg, rgba(76,125,240,.08), rgba(127,108,245,.08) 52%, rgba(255,255,255,0) 53%),
        repeating-linear-gradient(90deg, transparent 0 24%, rgba(31,37,40,.07) 24.2% 24.6%, transparent 24.8% 25%);
    }

    .compare-curve i {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--c);
      transform-origin: left center;
    }

    .compare-curve i:first-child {
      top: var(--p1);
      transform: skewY(var(--s1)) scaleX(.96);
    }

    .compare-curve i:last-child {
      top: var(--p2);
      transform: skewY(var(--s2)) scaleX(.9);
    }

    .compare-bars {
      display: grid;
      gap: 5px;
      align-content: start;
      min-height: 0;
    }

    .compare-row {
      display: grid;
      grid-template-columns: minmax(78px, .36fr) 1fr;
      gap: 10px;
      align-items: start;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--c);
    }

    .compare-term-link {
      min-width: 0;
      overflow: visible;
      color: inherit;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: normal;
      line-height: 1.12;
    }

    .compare-term-link:hover {
      text-decoration: underline;
    }

    .compare-bar {
      height: 14px;
      background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c), white 78%) var(--w), transparent 100%);
      border-left: 1px solid #d9d9d6;
    }

    .compare-time {
      display: grid;
      justify-items: center;
      align-content: start;
      gap: 9px;
      padding-top: 56px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .compare-time strong {
      padding: 5px 7px;
      border-radius: 6px;
      background: #202528;
      color: #fff;
    }

    .compare-empty {
      display: grid;
      align-content: center;
      gap: 18px;
      min-height: 220px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .compare-empty--side {
      min-height: 0;
      padding: 18px;
      border: 1px dashed rgba(31,37,40,.18);
      border-radius: 8px;
      background: rgba(255,255,255,.46);
    }

    .compare-empty strong {
      color: var(--ink);
      font-size: 14px;
      letter-spacing: .01em;
    }

    .note-strip {
      grid-column: 1 / 3;
      grid-row: 3;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 0;
      overflow: visible;
    }

    .note-family,
    .intensity-key {
      display: grid;
      align-items: stretch;
      justify-content: center;
      gap: 8px;
      min-height: 112px;
      min-width: 0;
      padding: 10px 10px 9px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,253,249,.86);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      overflow: hidden;
    }

    .note-family {
      grid-template-rows: 42px minmax(25px, auto) 18px;
      align-content: center;
    }

    .intensity-key {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      font-size: 9px;
    }

    .note-family__label {
      min-width: 0;
      min-height: 23px;
      overflow: hidden;
      color: inherit;
      text-decoration: none;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.15;
      white-space: normal;
      text-align: center;
    }

    .note-family__label:hover {
      text-decoration: underline;
    }

    .family-art {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      overflow: visible;
    }

    .family-icons {
      display: flex;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      flex: 0 0 auto;
      overflow: hidden;
      align-items: center;
      align-self: center;
    }

    .family-icons i {
      flex: 0 0 auto;
      width: min(var(--s, 14px), 14px);
      height: min(var(--s, 14px), 14px);
      border-radius: 50%;
      background: var(--c);
      opacity: var(--o);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.68);
    }

    .note-material {
      flex: 0 0 auto;
      display: block;
      width: var(--w, 30px);
      height: var(--h, 22px);
      position: relative;
      overflow: hidden;
      background: transparent;
      filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--c), transparent 64%));
    }

    .note-material img {
      position: absolute;
      width: var(--img-w);
      height: var(--img-h);
      left: var(--img-x);
      top: var(--img-y);
      display: block;
      max-width: none;
      object-fit: initial;
    }

    .note-material--full img {
      position: static;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .continuation-board {
      width: min(1420px, calc(100vw - 20px));
      margin: 14px auto 28px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .story-grid,
    .offer-panel,
    .story-panel,
    .community-panel,
    .reviews-panel {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,253,249,.92);
      padding: 18px;
    }

    .story-grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(var(--story-columns, 3), minmax(0, 1fr));
      gap: 16px;
      justify-self: stretch;
      padding: 0;
      border: 0;
      background: transparent;
      align-items: stretch;
    }

    .story-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    .story-stack {
      display: contents;
    }

    .story-card {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-width: 0;
      min-height: 260px;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,253,249,.92);
      padding: 22px 22px 20px;
      box-shadow: 0 10px 26px rgba(35, 31, 25, .06);
    }

    .story-card--primary {
      padding: 24px 24px 22px;
    }

    .story-grid,
    .offer-panel,
    .community-panel,
    .reviews-panel {
      grid-column: 1 / -1;
    }

    .concept-title {
      margin: 0 0 12px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .story-copy {
      display: grid;
      gap: 12px;
      align-content: start;
      color: #4b5559;
      font-size: 14px;
      line-height: 1.55;
      max-width: none;
    }

    .story-card--primary .story-copy {
      gap: 14px;
      font-size: 15px;
      line-height: 1.62;
    }

    .story-copy p {
      margin: 0;
    }

    .story-meta {
      display: none;
    }

    .story-meta:empty {
      display: none;
    }

    .story-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
      align-content: start;
    }

    .story-grid[hidden] {
      display: none;
    }

    .story-card[hidden] {
      display: none;
    }

    .story-tags span {
      padding: 8px 10px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 999px;
      background: #fff;
      color: #495256;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .story-card__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .story-card__eyebrow::before {
      content: "";
      width: 22px;
      height: 1px;
      background: rgba(31,37,40,.18);
    }

    .offer-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 22px 24px;
      background:
        linear-gradient(135deg, rgba(255,250,242,.96) 0%, rgba(247,251,255,.96) 100%);
      box-shadow: 0 16px 34px rgba(36, 48, 79, .06);
    }

    .offer-panel[hidden] {
      display: none;
    }

    .offer-copy {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .offer-kicker {
      display: inline-flex;
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      background: #fff0d7;
      color: #84540d;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .offer-headline {
      margin: 0;
      color: var(--ink);
      font-size: 26px;
      font-weight: 900;
      line-height: 1.02;
      text-transform: uppercase;
    }

    .offer-copy p {
      margin: 0;
      color: #4b5559;
      font-size: 14px;
      line-height: 1.5;
    }

    .offer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .offer-meta span {
      padding: 8px 10px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 999px;
      background: #fff;
      color: #495256;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .offer-actions {
      display: grid;
      justify-items: end;
      gap: 8px;
      min-width: 220px;
    }

    .offer-price {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      justify-content: flex-end;
      color: var(--ink);
    }

    .offer-price strong {
      font-size: 24px;
      line-height: 1;
    }

    .offer-price s {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-decoration-thickness: 1px;
    }

    .offer-button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border: 1px solid rgba(31,37,40,.12);
      border-radius: 8px;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .offer-footnote {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      text-align: right;
    }

    .occasion-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-content: start;
    }

    .occasion-list span {
      padding: 9px 10px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 8px;
      background: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .community-panel {
      display: grid;
      gap: 14px;
      width: 100%;
      justify-self: stretch;
    }

    .community-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      width: 100%;
    }

    .community-hint {
      margin: -6px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .community-usage,
    .community-metrics,
    .community-group {
      display: grid;
      gap: 8px;
      width: 100%;
    }

    .community-usage {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .community-group strong {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .community-group__items {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .community-choice {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      min-height: 82px;
      padding: 10px 12px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 8px;
      background: #fff;
      color: #526064;
      font-size: 12px;
      font-weight: 800;
    }

    .community-choice.is-active {
      color: var(--ink);
      background: color-mix(in srgb, var(--blue), white 88%);
      border-color: color-mix(in srgb, var(--blue), white 48%);
    }

    .community-choice__head,
    .community-choice__foot {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .community-choice__head {
      font-size: 12px;
    }

    .community-choice__label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .community-choice__label i {
      display: inline-grid;
      place-items: center;
      font-style: normal;
      font-size: 15px;
      line-height: 1;
      color: var(--ink);
    }

    .community-choice .vote-track {
      height: 7px;
    }

    .vote-actions {
      display: inline-flex;
      gap: 4px;
      align-items: center;
    }

    .vote-action {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(31,37,40,.12);
      border-radius: 999px;
      background: #fff;
      color: #465155;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .vote-count {
      min-width: 32px;
      color: var(--muted);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .community-vote {
      display: grid;
      justify-items: end;
      gap: 6px;
      min-width: 58px;
    }

    .community-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }

    .vote-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 12px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 8px;
      background: #fff;
      color: #526064;
      font-size: 12px;
      font-weight: 800;
    }

    .vote-row__head,
    .vote-row__meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .vote-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .vote-label i {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 50%;
      background: #fff;
      color: #485255;
      font-size: 11px;
      font-style: normal;
      line-height: 1;
    }

    @media (max-width: 900px) {
      .story-grid,
      .community-usage,
      .community-metrics {
        grid-template-columns: 1fr;
      }

      .story-grid {
        display: grid;
        width: 100%;
        max-width: none;
        grid-template-columns: 1fr;
        --story-columns: 1;
        justify-self: stretch;
      }

      .story-stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .story-card,
      .story-card--primary {
        min-height: 0;
        height: auto;
      }

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

    .reviews-panel {
      display: grid;
      gap: 12px;
    }

    .review-item {
      display: grid;
      gap: 7px;
      padding: 12px;
      border: 1px solid rgba(31,37,40,.1);
      border-radius: 8px;
      background: #fff;
      color: #4b5559;
      font-size: 13px;
      line-height: 1.45;
    }

    .review-item strong {
      color: var(--ink);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .intensity-key {
      grid-column: auto;
      justify-content: flex-start;
      border-right: 0;
      color: var(--muted);
    }

    .key-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .key-dots i {
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      background: #6f777a;
      opacity: var(--o);
    }

    /* Density pass: keep the desktop board compact without forcing an extra viewport inside the shell. */
    .board-shell {
      min-height: 0;
      padding: 10px;
      overflow: visible;
    }

    .concept-board {
      min-height: min(980px, calc(100vh - 140px));
      grid-template-rows: minmax(0, 1.12fr) minmax(0, .8fr) auto;
      gap: 10px;
    }

    .concept-panel {
      box-shadow: 0 12px 34px rgba(35, 31, 25, .08);
    }

    .panel-label {
      top: 14px;
      left: 14px;
      gap: 10px;
      font-size: 12px;
    }

    .panel-number {
      width: 24px;
      height: 24px;
      font-size: 12px;
    }

    .pyramid-card-panel {
      grid-template-columns: 154px minmax(0, 1fr);
      padding-top: 34px;
    }

    .product-panel {
      grid-template-rows: auto minmax(102px, .82fr) auto auto;
      gap: 9px;
      padding: 16px 14px 12px;
    }

    .product-index,
    .product-name p {
      margin-top: 5px;
      font-size: 12px;
    }

    .product-name h1 {
      font-size: clamp(15px, 1.05vw, 20px);
      line-height: 1.08;
    }

    .bottle-wrap {
      min-height: 142px;
    }

    .bottle {
      width: min(82px, 56%);
    }

    .bottle.has-photo {
      width: min(122px, 84%);
    }

    .bottle::before {
      top: -29px;
      height: 29px;
    }

    .about-button,
    .layer-button {
      min-height: 32px;
    }

    .concentration {
      gap: 5px;
      padding-top: 8px;
      font-size: 11px;
    }

    .product-panel {
      grid-template-rows: auto minmax(116px, 1fr) auto;
    }

    .living-panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .card-pyramid .ulnay-pyramid canvas {
      transform: scale(.9);
      transform-origin: 50% 44%;
    }

    .card-pyramid .ulnay-pyramid__controls {
      padding: 20px 56px 12px 18px;
    }

    .card-pyramid .ulnay-pyramid__time {
      display: none;
      top: 18px;
      right: -82px;
      width: 60px;
      min-width: 60px;
      height: 60px;
    }

    .notes-legend {
      width: 132px;
      gap: 22px;
      align-content: start;
      padding: 82px 10px 12px 0;
    }

    .legend-group {
      gap: 8px;
      font-size: 9.5px;
    }

    .legend-group strong {
      margin-bottom: 6px;
      font-size: 9px;
    }

    .legend-group span { margin: 0; }

    .timeline-panel,
    .compare-panel {
      padding: 16px;
    }

    .timeline-scale {
      grid-template-columns: minmax(92px, .16fr) minmax(0, 1fr);
      gap: 12px;
      padding-top: 12px;
    }

    .timeline-panel .big-play,
    .timeline-panel .clock-button {
      display: none;
    }

    .big-play {
      width: 42px;
      height: 42px;
    }

    .timeline-legend {
      gap: 6px;
      padding-top: 42px;
    }

    .timeline-legend__group {
      gap: 7px;
      font-size: 10px;
      line-height: 1.25;
    }

    .timeline-legend__group strong {
      margin-bottom: 5px;
      font-size: 9px;
    }

    .timeline-graph {
      gap: 8px;
    }

    .timeline-graph .time-axis {
      margin: 0 24px 0 66px;
    }

    #timelineRows {
      grid-template-rows: repeat(3, minmax(54px, 1fr));
    }

    .phase-row {
      grid-template-columns: 52px minmax(0, 1fr) 24px;
      gap: 6px;
    }

    .phase-label {
      font-size: 10px;
    }

    .phase-label small {
      font-size: 8px;
    }

    .timeline-copy {
      min-height: 34px;
      padding: 6px 9px;
      font-size: 11px;
      line-height: 1.25;
    }

    .clock-button {
      width: 34px;
      height: 34px;
    }

    .world-panel {
      grid-template-columns: 142px 1fr;
    }

    .world-stats {
      align-content: center;
      gap: 10px;
      padding: 56px 12px 16px;
    }

    .dial {
      width: 92px;
      height: 92px;
    }

    .dial::before {
      height: 28px;
    }

    .dial::after {
      height: 38px;
    }

    .world-stat {
      gap: 5px;
      font-size: 11px;
    }

    .meter-line {
      height: 7px;
    }

    .world-image {
      min-height: 0;
    }

    .world-legend {
      top: 18px;
      left: 18px;
      gap: 9px;
      font-size: 11px;
    }

    .world-actions {
      right: 12px;
      top: 12px;
      gap: 7px;
    }

    .world-action {
      width: 34px;
      height: 34px;
      font-size: 16px;
    }

    .compare-panel {
      gap: 10px;
    }

    .compare-content {
      grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
      gap: 14px;
    }

    .compare-side {
      grid-template-rows: 48px 66px minmax(76px, 1fr);
      gap: 8px;
    }

    .compare-time {
      padding-top: 46px;
      gap: 7px;
    }

    .note-strip {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .note-family,
    .intensity-key {
      gap: 8px;
      padding: 9px 9px 8px;
      font-size: 9.5px;
      min-height: 108px;
    }

    .family-icons i {
      width: min(var(--s, 14px), 14px);
      height: min(var(--s, 14px), 14px);
    }

    .key-dots {
      gap: 6px;
    }

    @media (max-width: 1120px) {
      .board-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
      }

      .concept-board {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
      }

      .pyramid-card-panel,
      .living-panel,
      .timeline-panel,
      .world-panel,
      .compare-panel,
      .note-strip {
        grid-column: auto;
        grid-row: auto;
      }

      .pyramid-card-panel {
        min-height: 620px;
      }

      .living-panel {
        grid-template-columns: 1fr;
      }

      .notes-legend {
        position: static;
        width: auto;
        pointer-events: auto;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 16px 20px;
      }

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

    }

    @media (max-width: 720px) {
      .board-shell {
        padding: 8px;
      }

      .concept-board {
        gap: 8px;
        min-height: 0;
      }

      .board-topbar,
      .pyramid-card-panel,
      .world-panel {
        grid-template-columns: 1fr;
      }

      .pyramid-card-panel {
        min-height: 0;
        padding-top: 36px;
      }

      .living-panel {
        align-items: start;
      }

      .product-panel {
        grid-template-columns: minmax(0, 1fr) 88px;
        grid-template-rows: auto auto auto;
        align-items: center;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .product-head {
        grid-column: 1 / 2;
      }

      .product-name {
        grid-column: 1 / 2;
      }

      .bottle-wrap {
        grid-column: 2;
        grid-row: 1 / 4;
        min-height: 108px;
      }

      .about-button {
        grid-column: 1 / 2;
      }

      .concentration {
        grid-column: 1 / -1;
      }

      .pyramid-zone {
        min-height: 0;
        grid-template-rows: auto;
      }

      .hero-animatic__media {
        min-height: 226px;
        aspect-ratio: 1 / .92;
      }

      .card-pyramid,
      .card-pyramid .ulnay-pyramid,
      .card-pyramid .ulnay-pyramid__shell,
      .card-pyramid .ulnay-pyramid__stack,
      .card-pyramid .ulnay-pyramid__main {
        min-height: 0;
        height: auto;
      }

      .card-pyramid .ulnay-pyramid__main {
        grid-template-rows: auto auto;
      }

      .card-pyramid .ulnay-pyramid__stage {
        min-height: 226px;
        aspect-ratio: 1 / .92;
      }

      .card-pyramid .ulnay-pyramid canvas {
        transform: scale(.98);
        transform-origin: 50% 38%;
      }

      .card-pyramid .ulnay-pyramid__controls {
        gap: 14px;
        padding: 10px 34px 8px 14px;
      }

      .hero-animatic__controls {
        gap: 14px;
        padding: 10px 34px 8px 14px;
      }

      .pyramid-clock {
        display: none;
      }

      .notes-legend {
        display: none;
      }

      .world-stats {
        order: 2;
        border-right: 0;
        border-top: 1px solid var(--line);
        border-bottom: 0;
      }

      .timeline-scale {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .big-play,
      .clock-button {
        display: none;
      }

      .timeline-panel,
      .compare-panel {
        padding: 14px;
      }

      .timeline-legend {
        grid-template-rows: none;
        gap: 10px;
        padding-top: 0;
        border-right: 0;
      }

      .phase-row {
        grid-template-columns: 48px minmax(0, 1fr) 22px;
      }

      #timelineRows {
        grid-template-rows: repeat(3, 76px);
      }

      .timeline-copy {
        min-height: 44px;
      }

      .world-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 14px 12px 12px;
      }

      .world-actions {
        display: none;
      }

      .world-image {
        order: 1;
        min-height: 238px;
      }

      .world-image img {
        object-position: center 42%;
      }

      .layer-button {
        grid-column: 1 / -1;
      }

      .compare-content {
        grid-template-columns: 1fr;
      }

      .compare-time {
        display: none;
      }

      .note-strip {
        display: none;
      }

      .continuation-board {
        grid-template-columns: 1fr;
      }

      .story-grid,
      .story-panel {
        grid-template-columns: 1fr;
      }

      .story-copy,
      .story-card--primary .story-copy {
        max-width: none;
      }

      .offer-panel {
        grid-template-columns: 1fr;
      }

      .offer-actions {
        justify-items: start;
        min-width: 0;
      }

      .offer-price,
      .offer-footnote {
        text-align: left;
        justify-content: flex-start;
      }

      .offer-headline {
        font-size: 22px;
      }

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