:root {
      --ink: #291e22;
      --muted: #75686c;
      --wine: #25171e;
      --wine-2: #36222c;
      --paper: #fcf9f5;
      --sand: #f1ebe5;
      --white: #fffefd;
      --coral: #efa08f;
      --rose: #eac7bd;
      --line: #dfd4cf;
      --light-line: #64454e;
      --radius: 16px;
      --shadow: 0 12px 32px rgb(52 27 35 / .055);
      --display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
      --serif: 'Instrument Serif', Georgia, serif;
      --body: 'DM Sans', system-ui, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font: 16px/1.65 var(--body);
    }

    body:has(dialog[open]) { overflow: hidden; }

    button, input, select, textarea { font: inherit; }
    button, a, input, summary { -webkit-tap-highlight-color: transparent; }
    button, summary { cursor: pointer; }
    button { color: inherit; }
    a { color: inherit; text-underline-offset: 4px; }
    a, button { touch-action: manipulation; }

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

    figure, blockquote, fieldset { margin: 0; }
    fieldset { min-width: 0; padding: 0; border: 0; }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1, h2, h3, h4 { text-wrap: balance; }
    p { margin-bottom: 1em; }
    p:last-child { margin-bottom: 0; }
    h3 { line-height: 1.35; }

    :focus-visible {
      outline: 3px solid #a74543;
      outline-offset: 5px;
    }

    .dark :focus-visible,
    .site-header :focus-visible { outline-color: #ffc1af; }

    [hidden] { display: none !important; }

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

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 12px;
      padding: 12px 20px;
      background: var(--paper);
      color: var(--ink);
      transform: translateY(-160%);
      border-radius: 8px;
    }

    .skip-link:focus { transform: translateY(0); }

    .container {
      width: min(1140px, calc(100% - 40px));
      margin-inline: auto;
    }

    .section { padding-block: 64px; }

    .section-label, .eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .section-label {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .section-label::before {
      content: '';
      width: 26px;
      height: 1px;
      background: currentColor;
    }

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

    .section-head {
      display: grid;
      gap: 18px;
      margin-bottom: 32px;
    }

    .section-head p {
      max-width: 46ch;
      color: var(--muted);
    }

    h2 {
      margin-bottom: 0;
      font: 600 clamp(2.5rem, 5.2vw, 4.1rem)/1.02 var(--display);
      text-transform: uppercase;
      letter-spacing: -.025em;
    }

    h2 em, .serif {
      font-family: var(--serif);
      font-weight: 400;
      text-transform: none;
      letter-spacing: -.025em;
    }

    .icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
      vertical-align: middle;
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      text-decoration: none;
      font-size: .875rem;
      font-weight: 700;
      line-height: 1.35;
      transition: transform .2s, background .2s, box-shadow .2s;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgb(0 0 0 / .1);
    }

    .button-primary {
      color: var(--wine);
      background: var(--coral);
    }

    .button-primary:hover { background: #ffb6a4; }

    .button-dark {
      color: var(--paper);
      background: var(--ink);
    }

    .button-dark:hover { background: #51313d; }

    .button-outline {
      border-color: var(--line);
      background: transparent;
    }

    .dark .button-outline {
      color: var(--paper);
      border-color: var(--light-line);
    }

    .dark .button-outline:hover { background: var(--wine-2); }

    .text-link, .text-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      font-size: .81rem;
      font-weight: 700;
      text-decoration: none;
    }

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

    .text-button {
      padding: 4px 0;
      border: 0;
      background: none;
    }

    .text-button:hover { color: #8c3e45; }

    .dark {
      color: var(--paper);
      background: var(--wine);
    }

    .dark .eyebrow,
    .dark .section-label { color: var(--coral); }

    .dark .muted,
    .dark .section-head p { color: #c7b6be; }

    .muted, .small-note { color: var(--muted); }

    .small-note {
      font-size: .8rem;
      line-height: 1.6;
    }

    .unique-slot:empty { display: none; }
    .unique-slot:not(:empty) { margin-block: 28px; }

    /* Header */

    .site-header {
      color: var(--paper);
      background: var(--wine);
      border-bottom: 1px solid var(--light-line);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 80px;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font: 600 2rem/1 var(--display);
      text-decoration: none;
      letter-spacing: -.04em;
    }

    .brand-mark {
      color: var(--coral);
      font-size: 2.4rem;
      font-weight: 400;
    }

    .brand small {
      display: none;
      font: 500 .6rem/1.5 var(--body);
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-left: 12px;
      padding-left: 17px;
      border-left: 1px solid var(--light-line);
    }

    .top-links {
      display: flex;
      align-items: center;
      gap: 17px;
      font-size: .76rem;
    }

    .top-links a {
      padding-block: 12px;
      text-decoration: none;
    }

    .top-links a:hover { color: var(--coral); }

    .adult-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--light-line);
      border-radius: 50%;
      font-size: .68rem;
    }

    /* 01 — Editorial hero */

    .hero {
      position: relative;
      overflow: hidden;
      padding-top: 36px;
      background:
        radial-gradient(ellipse at 87% 29%, #60323e 0, transparent 53%),
        var(--wine);
    }

    .hero::after {
      content: '';
      position: absolute;
      width: 530px;
      height: 530px;
      top: 65px;
      right: -140px;
      border: 1px solid rgb(239 160 143 / .15);
      border-radius: 50%;
      pointer-events: none;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 32px;
      color: #d0bdc4;
      font-size: .68rem;
    }

    .breadcrumb a { text-decoration: none; }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 36px;
      align-items: center;
    }

    .hero h1 {
      margin: 0 0 23px;
      font-family: var(--display);
      font-weight: 600;
      line-height: .93;
      letter-spacing: -.025em;
    }

    .hero h1 .prefix {
      display: block;
      margin-bottom: 13px;
      color: var(--coral);
      font: 600 .82rem/1.4 var(--body);
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero h1 .big {
      display: block;
      color: var(--coral);
      font-size: clamp(4.5rem, 12vw, 8.7rem);
      text-transform: uppercase;
    }

    .hero h1 .sub {
      display: block;
      margin-top: 10px;
      font-size: clamp(2.9rem, 6vw, 4.7rem);
      text-transform: uppercase;
    }

    .hero h1 em {
      display: block;
      color: var(--coral);
      font: italic 400 clamp(3.4rem, 6.5vw, 5.3rem)/1.06 var(--serif);
    }

    .hero-lead {
      max-width: 42ch;
      color: #dacbd1;
      font-size: 1rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 13px;
      margin-block: 26px 18px;
    }

    .hero-footnote {
      color: #c6b4bc;
      font-size: .72rem;
    }

    .hero-art {
      position: relative;
      height: 415px;
      margin: 0;
    }

    .hero-photo {
      position: absolute;
      overflow: hidden;
      background: #70564f;
    }

    .hero-photo img { filter: saturate(.65) brightness(.86); }

    .hero-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgb(37 23 30 / .7), transparent 55%);
    }

    .hero-woman {
      width: 70%;
      height: 94%;
      left: 3%;
      top: 0;
      border-radius: 180px 180px 14px 14px;
    }

    .hero-woman img { object-position: 48% 30%; }

    .hero-man {
      width: 44%;
      height: 59%;
      right: 0;
      bottom: 0;
      border: 7px solid var(--wine);
      border-radius: 100px 100px 14px 14px;
    }

    .hero-man img { object-position: 50% 25%; }

    .photo-note {
      position: absolute;
      bottom: 38px;
      left: -3px;
      z-index: 2;
      max-width: 200px;
      transform: rotate(-7deg);
      font: italic 2.5rem/1 var(--serif);
      color: #ffc0a9;
    }

    .art-star {
      position: absolute;
      top: 11%;
      right: 0;
      color: var(--coral);
      font-size: 5rem;
      line-height: 1;
    }

    .art-caption {
      position: absolute;
      bottom: 10px;
      left: 12px;
      color: #e0d2d7;
      font-size: .62rem;
      letter-spacing: .05em;
    }

    .hero-bottom {
      display: grid;
      gap: 22px;
      margin-top: 38px;
      padding-block: 28px;
      border-top: 1px solid var(--light-line);
    }

    .hero-answer {
      max-width: 72ch;
      color: #ddcdd4;
      font-size: .84rem;
    }

    .hero-answer strong { color: var(--coral); }

    .mini-promise {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #e0d1d7;
      font-size: .78rem;
    }

    .mini-promise .icon {
      width: 27px;
      height: 27px;
      color: var(--coral);
    }

    /* Sticky table of contents */

    .toc {
      position: sticky;
      top: 0;
      z-index: 30;
      border-bottom: 1px solid var(--line);
      background: rgb(252 249 245 / .97);
      backdrop-filter: blur(14px);
    }

    .toc-inner {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .toc a {
      flex: 0 0 auto;
      padding: 19px 12px;
      border-bottom: 2px solid transparent;
      font-size: .72rem;
      font-weight: 600;
      text-decoration: none;
    }

    .toc a span {
      margin-right: 6px;
      color: #976060;
    }

    .toc a:hover,
    .toc a[aria-current="location"] {
      color: #8e4149;
      border-bottom-color: #a65b62;
    }

    /* 02 — Readiness */

    .readiness-grid,
    .question-grid,
    .related-grid {
      display: grid;
      gap: 18px;
    }

    .readiness-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .readiness-card:nth-child(2) { background: #f5e8e1; }

    .readiness-card .step {
      display: block;
      margin-bottom: 28px;
      color: #a86468;
      font: 500 2.8rem/1 var(--display);
    }

    .readiness-card h3 {
      margin-bottom: 10px;
      font-size: 1.04rem;
    }

    .readiness-card p {
      color: #6b5d61;
      font-size: .88rem;
    }

    .permission {
      display: grid;
      gap: 10px;
      margin-top: 22px;
      padding: 22px 26px;
      border-left: 3px solid #a96063;
      background: var(--sand);
    }

    .permission p {
      margin: 0;
      font: 1.65rem/1.25 var(--serif);
    }

    .permission span {
      color: var(--muted);
      font-size: .72rem;
    }

    /* 03 — Question library */

    .library { background: var(--sand); }

    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 18px;
    }

    .filter-legend {
      display: block;
      margin-bottom: 9px;
      font-size: .75rem;
      font-weight: 700;
    }

    .filter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .chip {
      min-height: 44px;
      padding: 10px 15px;
      border: 1px solid #d4c3bd;
      border-radius: 999px;
      background: transparent;
      font-size: .78rem;
      transition: background .18s;
    }

    .chip:hover { background: #e6d8d1; }

    .chip[aria-pressed="true"] {
      color: white;
      background: var(--wine);
      border-color: var(--wine);
    }

    .search-box {
      position: relative;
      flex: 1 1 210px;
      max-width: 290px;
    }

    .search-box input {
      width: 100%;
      min-height: 46px;
      padding: 11px 15px 11px 40px;
      border: 1px solid #d4c3bd;
      border-radius: 999px;
      background: var(--paper);
      font-size: .82rem;
    }

    .search-box .icon {
      position: absolute;
      left: 13px;
      bottom: 13px;
      width: 18px;
      height: 18px;
      color: var(--muted);
    }

    .result-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--muted);
      font-size: .74rem;
    }

    .result-row p { margin: 0; }

    .question-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: var(--shadow);
      transition: border-color .2s, transform .2s;
    }

    .question-card:hover {
      border-color: #b47c7c;
      transform: translateY(-3px);
    }

    .question-card.is-selected {
      border-color: #9e565e;
      box-shadow: inset 0 0 0 1px #9e565e, var(--shadow);
    }

    .card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }

    .number {
      color: #9c7777;
      font: 500 1.85rem/1 var(--display);
    }

    .tag {
      display: inline-flex;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: .66rem;
      font-weight: 700;
    }

    .tag-ringan { background: #e8eee5; color: #45603f; }
    .tag-personal { background: #f5e5d7; color: #82512f; }
    .tag-mendalam { background: #eee1eb; color: #794d6e; }

    .question-card .eyebrow {
      margin-bottom: 11px;
      font-size: .64rem;
    }

    .question-text {
      margin-bottom: 13px;
      font: 600 1.16rem/1.45 var(--body);
    }

    .card-note {
      color: var(--muted);
      font-size: .8rem;
    }

    .mini-detail {
      margin-top: auto;
      font-size: .77rem;
    }

    .mini-detail summary {
      padding-block: 10px;
      color: #7e414b;
      font-weight: 600;
    }

    .mini-detail p { padding-top: 9px; }

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 6px;
      margin-top: 14px;
      padding-top: 8px;
      border-top: 1px solid #e9e0dc;
    }

    .card-actions .icon { width: 16px; height: 16px; }

    .empty-results {
      padding: 34px;
      border: 1px dashed #ad8e88;
      border-radius: var(--radius);
      text-align: center;
    }

    .library-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-top: 26px;
    }

    .library-bottom p { margin: 0; max-width: 64ch; }

    /* 04 — Branching conversation */

    .branch-layout {
      display: grid;
      gap: 30px;
    }

    .branch-aside > p {
      color: var(--muted);
      font-size: .93rem;
    }

    .branch-aside h2 { margin-bottom: 22px; }

    .flow-list {
      padding: 0;
      margin: 28px 0;
      list-style: none;
      counter-reset: flow;
    }

    .flow-list li {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 12px;
      align-items: start;
      padding-block: 12px;
      font-size: .83rem;
    }

    .flow-list li::before {
      counter-increment: flow;
      content: '0' counter(flow);
      color: #9c525b;
      font: 600 1.2rem var(--display);
    }

    .flow-list strong { display: block; }
    .flow-list span { color: var(--muted); }

    .chat-demo {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--sand);
      box-shadow: var(--shadow);
    }

    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }

    .chat-header strong { font-size: .85rem; }

    .chat-header p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: .67rem;
    }

    .chat-header .icon { color: #8f515a; }
    .chat-body { padding: 24px; }

    .message {
      max-width: 93%;
      padding: 18px 20px;
      border-radius: 16px 16px 16px 3px;
      background: var(--white);
      font-size: .91rem;
    }

    .message-self {
      margin-left: auto;
      border-radius: 16px 16px 3px 16px;
      color: var(--paper);
      background: var(--wine);
    }

    .message-label {
      display: block;
      margin-bottom: 7px;
      color: #8c6e76;
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .message-self .message-label { color: #f3b9a9; }

    .reply-picker { margin-block: 23px; }

    .reply-picker legend {
      margin-bottom: 10px;
      font-size: .75rem;
      font-weight: 600;
    }

    .reply-options {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .radio-pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 42px;
    }

    .radio-pill input {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .radio-pill span {
      display: block;
      padding: 10px 12px;
      border: 1px solid #cebdb7;
      border-radius: 999px;
      font-size: .7rem;
      pointer-events: none;
    }

    .radio-pill input:checked + span {
      border-color: #9d5960;
      color: #60363f;
      background: #ebd5ce;
    }

    .radio-pill input:focus-visible + span {
      outline: 3px solid #a74543;
      outline-offset: 3px;
    }

    .branch-panel + .branch-panel { margin-top: 24px; }
    .branch-panel .message { margin-bottom: 14px; }

    .branch-reason {
      margin: 13px 0 0;
      padding-left: 13px;
      border-left: 2px solid #a56b72;
      color: #776267;
      font-size: .74rem;
    }

    .chat-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      margin-top: 20px;
      color: var(--muted);
      font-size: .68rem;
    }

    /* 05 — Pause */

    .pause-section { background: #efddd5; }

    .pause-layout {
      display: grid;
      gap: 30px;
    }

    .pause-art {
      display: grid;
      place-items: center;
      width: 60px;
      height: 60px;
      margin-bottom: 22px;
      border: 1px solid #bd9390;
      border-radius: 50%;
    }

    .pause-art .icon { width: 23px; height: 23px; }

    .check-list {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding: 0 0 17px 29px;
      font-size: .9rem;
    }

    .check-list li::before {
      content: '↗';
      position: absolute;
      left: 0;
      color: #8f4b55;
      font-size: 1.1rem;
    }

    .pause-quote {
      padding: 22px 24px;
      border: 1px solid #ccaaa0;
      border-radius: 12px;
      font: italic 1.8rem/1.25 var(--serif);
    }

    /* 06 — Preparation and optional AI */

    .practice {
      background:
        radial-gradient(ellipse at 100% 0%, #56303c 0, transparent 42%),
        var(--wine);
    }

    .practice .section-head h2 em { color: var(--coral); }

    .practice-builder {
      display: grid;
      gap: 24px;
      padding: 26px;
      border: 1px solid var(--light-line);
      border-radius: 20px;
      background: rgb(255 255 255 / .025);
    }

    .practice-builder h3 {
      font: 500 2rem/1.15 var(--display);
      text-transform: uppercase;
    }

    .practice-builder .small-note { color: #cbb9c1; }

    .mode-options {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .mode-choice {
      display: flex;
      align-items: start;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--light-line);
      border-radius: 10px;
      cursor: pointer;
    }

    .mode-choice:has(input:checked) {
      border-color: var(--coral);
      background: rgb(239 160 143 / .09);
    }

    .mode-choice input {
      margin: 5px 0 0;
      accent-color: var(--coral);
    }

    .mode-choice strong {
      display: block;
      font-size: .8rem;
    }

    .mode-choice small {
      display: block;
      margin-top: 2px;
      color: #c7b4bd;
      font-size: .7rem;
    }

    .prompt-label {
      display: block;
      margin-bottom: 10px;
      font-size: .73rem;
      font-weight: 600;
    }

    .prompt-box {
      display: block;
      width: 100%;
      min-height: 200px;
      resize: vertical;
      padding: 17px;
      border: 1px solid #76565f;
      border-radius: 12px;
      color: #f8ebe8;
      background: #20151b;
      font-size: .86rem;
      line-height: 1.65;
    }

    .prompt-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .local-link {
      display: inline-block;
      margin-top: 14px;
      color: #ecc1b5;
      font-size: .77rem;
    }

    .companion-heading {
      display: grid;
      gap: 18px;
      margin-top: 54px;
      margin-bottom: 25px;
    }

    .companion-heading h3 {
      margin-bottom: 10px;
      font: 500 clamp(2.2rem, 4vw, 3.1rem)/1.03 var(--display);
      text-transform: uppercase;
    }

    .companion-heading h3 em {
      color: var(--coral);
      font: italic 1.08em var(--serif);
      text-transform: none;
    }

    .companion-heading p {
      max-width: 70ch;
      color: #cdbbc3;
      font-size: .83rem;
    }

    .small-label {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .companion-grid {
      display: grid;
      gap: 16px;
    }

    .companion-card {
      overflow: hidden;
      border: 1px solid var(--light-line);
      border-radius: 16px;
      background: #32222b;
    }

    .companion-photo {
      position: relative;
      aspect-ratio: 4/5;
      overflow: hidden;
      background: #59474b;
    }

    .companion-photo img {
      filter: saturate(.62) sepia(.12) brightness(.87);
      transition: transform .5s, filter .5s;
    }

    .companion-card:hover img {
      transform: scale(1.035);
      filter: saturate(.8) sepia(.08) brightness(.95);
    }

    .companion-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 45%, rgb(26 16 23 / .85));
      pointer-events: none;
    }

    .photo-label {
      position: absolute;
      z-index: 1;
      left: 15px;
      top: 15px;
      padding: 4px 9px;
      border: 1px solid rgb(255 255 255 / .4);
      border-radius: 999px;
      background: rgb(25 16 23 / .45);
      font-size: .63rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .photo-title {
      position: absolute;
      z-index: 1;
      left: 18px;
      bottom: 14px;
      right: 12px;
    }

    .photo-title small {
      display: block;
      color: #f6c4b7;
      font-size: .67rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .photo-title h4 {
      margin: 5px 0 0;
      font: italic 2rem/1 var(--serif);
    }

    .companion-copy { padding: 18px; }

    .companion-copy p {
      min-height: 2.6em;
      color: #d5c2cb;
      font-size: .75rem;
    }

    .mood-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid #8d6774;
      border-radius: 8px;
      color: var(--paper);
      background: none;
      font-size: .7rem;
    }

    .mood-button:hover,
    .mood-button[aria-pressed="true"] {
      color: var(--wine);
      background: var(--coral);
      border-color: var(--coral);
    }

    .image-disclosure {
      margin-top: 17px;
      color: #c8b4bf;
      font-size: .72rem;
    }

    .external-bridge {
      display: grid;
      gap: 22px;
      margin-top: 30px;
      padding: 27px;
      border: 1px solid #b77b7c;
      border-radius: 14px;
      background: #402934;
    }

    .external-bridge strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1.1rem;
    }

    .external-bridge p {
      max-width: 63ch;
      color: #dfc8d2;
      font-size: .8rem;
    }

    .external-bridge .button { align-self: center; }

    .transparency {
      margin-top: 44px;
      padding-top: 34px;
      border-top: 1px solid var(--light-line);
    }

    .transparency h3,
    .faq-block h3 {
      margin-bottom: 18px;
      font: 500 1.8rem/1.15 var(--display);
      text-transform: uppercase;
    }

    .table-scroll {
      overflow-x: auto;
      border: 1px solid var(--light-line);
      border-radius: 12px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .78rem;
      text-align: left;
    }

    caption {
      padding: 17px 18px;
      color: #d4bac6;
      background: #32212b;
      font-size: .75rem;
      text-align: left;
    }

    th, td {
      padding: 16px 18px;
      border-top: 1px solid var(--light-line);
      vertical-align: top;
    }

    thead th {
      color: #f3b2a0;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    tbody th { font-weight: 500; }
    tbody tr:nth-child(even) { background: rgb(255 255 255 / .04); }
    tbody td:nth-child(2) { font-weight: 700; }

    .faq-block { margin-top: 32px; }

    .faq-grid {
      display: grid;
      gap: 0 28px;
    }

    .faq-grid details {
      padding: 17px 0;
      border-bottom: 1px solid var(--light-line);
    }

    .faq-grid summary {
      padding-right: 10px;
      font-size: .86rem;
      font-weight: 500;
    }

    .faq-grid details p {
      margin: 14px 0 0;
      color: #d6c1cc;
      font-size: .79rem;
    }

    /* 07 — Related scenarios */

    .related-card {
      position: relative;
      display: block;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      text-decoration: none;
      transition: background .2s;
    }

    .related-card:hover { background: #f5e7de; }
    .related-card .eyebrow { margin-bottom: 25px; }

    .related-card h3 {
      max-width: 15ch;
      font: 500 1.9rem/1.08 var(--display);
      text-transform: uppercase;
    }

    .related-card p {
      max-width: 32ch;
      padding-right: 18px;
      color: var(--muted);
      font-size: .8rem;
    }

    .related-card .icon {
      position: absolute;
      right: 25px;
      bottom: 25px;
    }

    .closing {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      margin-top: 40px;
      padding: 32px;
      border-radius: 18px;
      background: var(--coral);
    }

    .closing p {
      margin: 0;
      font: 500 clamp(2rem, 4.5vw, 3.7rem)/1 var(--display);
      text-transform: uppercase;
    }

    .closing em {
      font-family: var(--serif);
      font-weight: 400;
      text-transform: none;
    }

    /* Footer */

    .site-footer {
      padding-block: 35px;
      border-top: 1px solid var(--line);
      background: var(--sand);
    }

    .footer-main {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: start;
      justify-content: space-between;
    }

    .footer-main .brand { font-size: 1.8rem; }
    .footer-main .brand-mark { color: #a65b61; }

    .footer-main p {
      max-width: 52ch;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: .72rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      max-width: 450px;
      font-size: .72rem;
    }

    .footer-detail {
      margin-top: 24px;
      padding-top: 17px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .72rem;
    }

    .footer-detail summary { min-height: 30px; }

    .footer-detail p {
      margin-top: 10px;
      max-width: 95ch;
    }

    /* Feedback and dialogs */

    .toast {
      position: fixed;
      z-index: 90;
      left: 50%;
      bottom: max(20px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      max-width: calc(100vw - 32px);
      padding: 13px 22px;
      border: 1px solid #96717e;
      border-radius: 12px;
      color: var(--paper);
      background: var(--wine);
      font-size: .82rem;
      box-shadow: 0 12px 35px rgb(0 0 0 / .18);
    }

    .toast:empty { display: none; }

    dialog {
      width: min(520px, calc(100% - 32px));
      max-height: calc(100dvh - 40px);
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: 20px;
      color: var(--ink);
      background: var(--paper);
      box-shadow: 0 25px 90px rgb(0 0 0 / .3);
    }

    dialog::backdrop {
      background: rgb(24 13 20 / .78);
      backdrop-filter: blur(5px);
    }

    dialog h2 {
      margin-block: 24px 18px;
      font-size: 2.5rem;
    }

    dialog p { font-size: .88rem; }

    .dialog-close {
      display: flex;
      justify-content: flex-end;
    }

    .dialog-close button {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      font-size: 1.4rem;
    }

    .age-check {
      display: flex;
      align-items: start;
      gap: 12px;
      padding: 17px 0;
      margin-bottom: 12px;
      font-size: .84rem;
    }

    .age-check input {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-top: 3px;
      accent-color: #753e4e;
    }

    .manual-copy {
      width: 100%;
      min-height: 150px;
      padding: 14px;
      border: 1px solid #b49b96;
      border-radius: 10px;
      font-size: .9rem;
      resize: vertical;
    }

    .photo-error {
      display: grid;
      place-items: center;
      padding: 18px;
      color: #f1d4cf;
      font: italic 2rem var(--serif);
      text-align: center;
    }

    .photo-error::before { content: 'Ruang untuk bercerita'; }
    .photo-error img { display: none; }

    /* Mobile first → tablet */

    @media (min-width: 600px) {
      .container { width: min(1140px, calc(100% - 64px)); }
      .section { padding-block: 80px; }
      .brand small { display: block; }
      .top-links { gap: 26px; font-size: .8rem; }

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

      .section-head {
        grid-template-columns: 1.2fr 1fr;
        align-items: end;
        gap: 40px;
      }

      .section-head > p { margin-bottom: 3px; }

      .hero-art {
        width: 440px;
        max-width: 100%;
        margin-inline: auto;
        height: 460px;
      }

      .pause-layout {
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
      }

      .permission {
        grid-template-columns: 1fr auto;
        align-items: center;
      }

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

    /* Desktop */

    @media (min-width: 900px) {
      .hero { padding-top: 30px; }

      .hero-grid {
        grid-template-columns: 1.14fr 1fr;
        gap: 35px;
      }

      .hero-art { width: 100%; height: 515px; }

      .hero h1 .big { font-size: clamp(6rem, 10.5vw, 8.2rem); }
      .hero h1 .sub { font-size: 4.4rem; }
      .hero h1 em { font-size: 5rem; }

      .hero-bottom {
        grid-template-columns: 1.55fr 1fr;
        align-items: center;
        gap: 80px;
      }

      .readiness-grid,
      .question-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .branch-layout {
        grid-template-columns: .85fr 1.15fr;
        gap: 72px;
        align-items: start;
      }

      .branch-aside { position: sticky; top: 100px; }

      .practice-builder {
        grid-template-columns: .8fr 1.2fr;
        gap: 42px;
        padding: 34px;
      }

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

      .external-bridge {
        grid-template-columns: 1fr auto;
        align-items: center;
      }

      .companion-heading {
        grid-template-columns: 1.45fr .8fr;
        align-items: end;
        gap: 35px;
      }

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

    @media (max-width: 380px) {
      .container { width: calc(100% - 32px); }
      .top-links { gap: 12px; font-size: .7rem; }
      .adult-label { display: none; }
      .hero h1 .big { font-size: 4.1rem; }
      .hero-art { height: 355px; }
      .prompt-actions .button { width: 100%; }
      .chat-body, .practice-builder { padding: 20px; }
      th, td { padding: 12px 10px; font-size: .68rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }

      .button:hover,
      .question-card:hover,
      .companion-card:hover img { transform: none; }
    }

    @media print {
      body { color: #000; background: #fff; }

      .site-header, .toc, .hero-art, .filter-bar, .card-actions,
      .hero-actions, .companion-grid, .external-bridge, dialog,
      .toast, .prompt-actions, [data-enhance] { display: none !important; }

      .dark, .library, .pause-section {
        color: #000;
        background: #fff;
      }

      .dark p, .dark .muted, .dark .section-label,
      .hero h1 span, .hero h1 em { color: #000 !important; }

      .section { padding-block: 25px; }

      .question-card, .readiness-card {
        break-inside: avoid;
        box-shadow: none;
      }

      .hero-grid, .branch-layout, .practice-builder { display: block; }
      .branch-aside { position: static; }
    }
  
.article-body{max-width:780px;margin:auto;padding:48px 20px}.article-body section{margin-block:44px}.article-body h2{font-size:2.2rem;line-height:1.15;margin-bottom:22px}.article-body h3{margin-top:26px}.article-body blockquote{padding:20px 24px;border-left:3px solid var(--coral);background:var(--sand);margin-block:20px}.article-body td,.article-body th{vertical-align:top}.article-hero{padding:48px 0}.article-hero h1{font:600 clamp(2.7rem,7vw,5rem)/1.05 var(--display);max-width:20ch}.article-hero p{max-width:65ch}.article-body li{margin-bottom:10px}.article-body nav{display:flex;flex-wrap:wrap;gap:20px}

/* Fictional editorial character portraits */
.character-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:24px 0 14px}
.character-card{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#25171e;aspect-ratio:2/3}
.character-card img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.character-card:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(24,13,20,.9));z-index:1}
.character-card figcaption{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff8f1;z-index:2}
.character-name{display:block;font:600 2.4rem/1.1 var(--display);margin-bottom:9px}
.character-card figcaption p{font-size:.9rem;line-height:1.45;max-width:27ch}
@media(max-width:520px){.character-pair{gap:12px}.character-card{border-radius:18px;aspect-ratio:3/5}.character-card figcaption{padding:13px}.character-name{font-size:1.8rem}.character-card figcaption p{font-size:.72rem}}

.brand .site-logo{width:138px;height:46px;object-fit:contain}.footer-main .site-logo{filter:brightness(.5)}.editorial-link{padding-block:20px;font-size:.85rem}.article-body .breadcrumb{color:var(--muted);margin-bottom:24px}.article-body .breadcrumb a{color:var(--ink)}

/* Clear, contextual external-service calls to action */
.wantyou-nav{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:var(--wine);padding:10px 15px!important;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;min-height:44px}
.top-links .wantyou-nav:hover{color:var(--wine);background:#ffc1af}.wantyou-nav span{font-size:.65rem}
.wantyou-bridge{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:20px 0;border-bottom:1px solid var(--light-line)}
.wantyou-bridge p{flex:1 1 350px;max-width:66ch;margin:0;font-size:.87rem;color:#e0d1d7}.wantyou-bridge strong{color:var(--paper)}.wantyou-bridge a{color:var(--coral);font-weight:700;min-height:44px;display:inline-flex;align-items:center}.wantyou-bridge span{width:100%;font-size:.7rem;color:#c7b6be}
.wantyou-cta{padding:32px;border-radius:22px;background:var(--wine);color:var(--paper);margin:44px 0}.wantyou-cta .eyebrow{color:var(--coral)}.wantyou-cta h2{font-size:2.3rem}.wantyou-cta .wantyou-note{margin-top:18px;font-size:.75rem;color:#d4c2ca;line-height:1.6}.wantyou-cta .button{margin-top:8px}
@media(max-width:520px){.topbar{flex-wrap:wrap;padding-block:12px}.top-links{gap:12px;flex-wrap:wrap}.wantyou-cta{padding:24px}.wantyou-cta h2{font-size:2rem}}