:root{--paper:#f5f2e9;--ink:#353d2d;--olive:#566347;--muted:#929285;--line:#dedfd2;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--olive);outline-offset:5px}button:disabled{opacity:.4;cursor:default}button:not(:disabled):hover{filter:brightness(.94)}.app{min-height:100svh;display:grid;grid-template-columns:300px 1fr}.sidebar{padding:44px 28px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#efeee4}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);width:max-content}.brand svg{width:38px;stroke:var(--olive);stroke-width:1.5}.brand>span{font-family:var(--serif);font-size:45px;letter-spacing:-2px}.brand-dot{color:#aab192}.brand-caption{font-size:8px;letter-spacing:1.9px;margin:17px 0 65px;color:#787e6e}.category-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:9px;letter-spacing:1.3px;color:#878b7c}.text-button{font-size:11px;color:#7a806e;padding:3px 0}.category-heading .text-button{letter-spacing:0;text-decoration:underline;text-underline-offset:3px}.category-button{display:flex;align-items:center;gap:12px;width:100%;padding:16px 12px;text-align:left;margin-bottom:6px;border:1px solid transparent;border-radius:12px;transition:background .2s}.category-button.selected{background:#e3e6d7;border-color:#d7ddc8}.category-icon{font-family:var(--serif);font-size:27px;width:28px;text-align:center}.category-copy{flex:1}.category-name{display:block;font-size:13px;font-weight:550;margin-bottom:6px}.category-subtitle{font-size:9px;color:#898d7e;display:block}.category-check{height:16px;width:16px;border:1px solid #c7ccbc;border-radius:50%;font-size:10px;text-align:center;line-height:14px;color:transparent;flex-shrink:0}.selected .category-check{background:var(--olive);border-color:var(--olive);color:white}.category-note{font-size:11px;line-height:1.8;color:#95988b;margin:17px 10px 30px}.sidebar-bottom{margin-top:auto}.progress-heading{display:flex;justify-content:space-between;font-size:11px}.progress-heading>span:last-child{color:#929787;font-size:10px}.progress-track{height:3px;background:#d9ddcf;margin-top:13px;border-radius:3px;overflow:hidden}.progress-track>div{height:100%;background:var(--olive);transition:width .3s}#progress-caption{font-size:10px;color:#909686;margin:9px 0 22px}.library-actions{border-top:1px solid var(--line);padding:13px 0}.library-button{display:flex;width:100%;gap:10px;align-items:center;padding:10px 2px;text-align:left;font-size:11px}.library-button>span:first-child{font-size:19px;line-height:16px}.count{margin-left:auto;color:#959b8a;font-size:10px}.reset-button{font-size:10px;color:#989c90;margin-top:5px}main{padding:32px 52px 22px;display:flex;flex-direction:column;min-width:0;background:radial-gradient(ellipse at 65% 30%,#faf8f1 0%,transparent 68%)}.topbar{display:flex;justify-content:space-between;align-items:center}.couple{display:flex;align-items:center;gap:12px;font-size:12px}.amp{font-family:var(--serif);font-style:italic;color:#9a9c8e;margin:0 5px}.couple-dots{display:flex}.couple-dots i{height:30px;width:30px;border-radius:50%;background:#dce1cf;display:grid;place-items:center;font-size:10px;font-style:normal;border:2px solid var(--paper)}.couple-dots i+i{margin-left:-7px;background:#e9dcd0}.icon-button{height:36px;width:36px;display:grid;place-items:center;border-radius:50%;color:#858c78}.icon-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5}.conversation{width:min(100%,850px);margin:auto; padding:48px 0 35px}.intro{text-align:center;margin-bottom:35px}.eyebrow{font-size:9px;letter-spacing:2px;color:#929985}.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.5vw,40px);letter-spacing:-1.1px;margin:15px 0 12px}.intro h1 em{font-weight:400;color:#697457}.intro>p{font-size:12px;color:#979b8d}.question-card{background:#fcfbf6;border:1px solid #e0e2d7;border-radius:20px;min-height:385px;display:flex;flex-direction:column;padding:26px 32px;box-shadow:0 16px 50px -30px #7b856660,0 3px 6px -4px #8a927340;position:relative}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center}.category-badge{display:inline-flex;align-items:center;gap:8px;color:#7b856b;font-size:10px;letter-spacing:.4px}.category-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--category-color,#8b9678)}.favorite-button svg{fill:none}.favorite-button[aria-pressed=true]{color:#ad7f6d}.favorite-button[aria-pressed=true] svg{fill:#ad7f6d}.question-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 16px 20px}.question-ornament{font-family:var(--serif);font-size:66px;line-height:1;color:#d2d8c4;margin-bottom:-12px}.question-content h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.8vw,43px);line-height:1.28;letter-spacing:-.7px;max-width:690px;margin:6px 0 16px;text-wrap:balance}.question-content h2.long{font-size:clamp(22px,2.2vw,34px)}.question-content p{font-size:11px;color:#a0a394;margin:0;line-height:1.6}.card-bottom{border-top:1px solid #efeee5;padding-top:19px;font-size:9px;color:#a1a596;letter-spacing:.4px}.turn-button{display:flex;align-items:center;gap:7px;font-size:10px;color:#88917b}.turn-button>span:last-child{margin-left:5px;font-size:15px}.turn-dot{width:5px;height:5px;border-radius:50%;background:#a9b591}.question-actions{display:flex;justify-content:center;gap:25px;align-items:center;margin:26px 0 20px}.primary-button{display:flex;align-items:center;justify-content:center;gap:28px;background:var(--olive);color:#f9f9ed;min-height:51px;padding:15px 26px;border-radius:9px;font-size:12px;box-shadow:0 5px 12px -8px var(--olive);transition:transform .15s}.primary-button:active{transform:translateY(1px)}.primary-button>span:last-child{font-size:19px}.skip-button{font-size:11px;color:#8b937d;padding:12px 8px}.skip-button>span{margin-left:9px;font-size:15px}.shortcut-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;color:#a0a696}kbd{font:inherit;font-size:8px;border:1px solid #dce0d3;border-radius:4px;padding:3px 6px;background:#eeeee3}.separator{padding:0 5px}footer{display:flex;align-items:center;gap:8px;font-size:10px;color:#929b83}.footer-flower{font-size:21px;color:#a2ad91}.save-status{margin-left:auto;font-size:9px;color:#a0a692;display:flex;gap:6px;align-items:center}.save-status i{width:4px;height:4px;border-radius:50%;background:#a4b18d}dialog{background:#faf8f1;color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:30px;width:min(640px,calc(100% - 32px));max-height:80svh;box-shadow:0 25px 90px #20271830}dialog::backdrop{background:#303a2955;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}dialog h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:12px 0}dialog p{font-size:12px;color:#929787;line-height:1.7}.library-item{display:block;text-align:left;width:100%;padding:18px 0;border-top:1px solid var(--line)}.library-item small{color:#939b85;font-size:9px;display:block;margin-bottom:7px}.library-item span{font-family:var(--serif);font-size:19px;line-height:1.4}.dialog-actions{display:flex;justify-content:flex-end;gap:15px;margin-top:25px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);background:#3f4a35;color:white;padding:12px 20px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.visible{opacity:1;transform:translate(-50%,0)}.question-card.animate .question-content{animation:arrive .35s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.app{grid-template-columns:330px 1fr}.sidebar{padding:50px 34px 30px}main{padding:40px 65px 28px}.question-card{min-height:440px}.conversation{width:min(100%,920px)}.intro{margin-bottom:42px}.category-button{padding-top:19px;padding-bottom:19px}}@media(max-height:800px) and (min-width:851px){.sidebar{padding-top:27px}.brand-caption{margin-bottom:35px}.category-button{padding-top:12px;padding-bottom:12px}.conversation{padding:25px 0 20px}.intro{margin-bottom:22px}.question-card{min-height:330px}.question-content h2{font-size:34px}.question-content h2.long{font-size:27px}}@media(max-width:1100px){.app{grid-template-columns:255px 1fr}.sidebar{padding-left:18px;padding-right:18px}main{padding-left:28px;padding-right:28px}.category-subtitle{font-size:8px}.question-card{padding:20px}.question-content{padding-left:0;padding-right:0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} 


/* Phone layout: a compact header, swipeable categories and a generous reading area. */
html { -webkit-text-size-adjust: 100%; }
button { touch-action: manipulation; }
.library-reset { margin-top: 20px; min-height: 44px; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 850px) {
  .app { display: flex; flex-direction: column; min-height: 100svh; }
  .sidebar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 8px;
    padding: calc(16px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .brand { grid-column: 1; grid-row: 1; min-height: 44px; gap: 8px; }
  .brand > span { font-size: 36px; }
  .brand svg { width: 29px; }
  .brand-caption, .category-note, .category-subtitle { display: none; }
  .category-heading { grid-column: 1 / -1; margin: 2px 0 -8px; font-size: 9px; }
  .category-heading .text-button { min-height: 44px; padding: 10px 4px; font-size: 12px; }
  #categories {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 6px;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #categories::-webkit-scrollbar { display: none; }
  .category-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    gap: 8px;
    border-color: #d9ddce;
    border-radius: 24px;
    background: #f6f4eb;
  }
  .category-button.selected { background: #e0e5d2; border-color: #c4cdb2; }
  .category-icon { width: 20px; font-size: 22px; }
  .category-name { margin: 0; font-size: 12px; }
  .category-check { display: none; }
  .sidebar-bottom { grid-column: 2; grid-row: 1; margin: 0; }
  .progress-heading, .progress-track, #progress-caption, .reset-button { display: none; }
  .library-actions { display: flex; gap: 8px; border: 0; padding: 0; }
  .library-button { min-width: 44px; min-height: 44px; width: auto; gap: 4px; padding: 8px; border: 1px solid #dedfd2; border-radius: 14px; }
  .library-button > span:first-child { font-size: 23px; line-height: 24px; }
  .library-label { display: none; }
  .count { margin: 0; font-size: 11px; }
  main { flex: 1; padding: 16px max(20px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .topbar { justify-content: center; }
  .couple { font-size: 12px; gap: 8px; }
  .couple-dots i { width: 27px; height: 27px; }
  #fullscreen-button { display: none; }
  .conversation { padding: 26px 0 8px; margin: auto; width: min(100%, 560px); }
  .intro { margin-bottom: 24px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.7px; }
  .intro h1 { font-size: clamp(26px, 6.6vw, 36px); line-height: 1.2; letter-spacing: -.8px; margin: 12px 0; }
  .intro h1 em { display: block; }
  .intro > p { font-size: 11px; line-height: 1.6; margin-bottom: 0; }
  .question-card { min-height: 310px; padding: 16px 20px; border-radius: 22px; }
  .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .icon-button svg { width: 20px; height: 20px; }
  .category-badge { font-size: 10px; letter-spacing: .2px; line-height: 1.5; }
  .question-content { padding: 4px 0 20px; }
  .question-ornament { font-size: 58px; }
  .question-content h2 { font-size: clamp(27px, 7.1vw, 36px); line-height: 1.22; letter-spacing: -.6px; margin-bottom: 18px; overflow-wrap: break-word; }
  .question-content h2.long { font-size: clamp(24px, 6.3vw, 30px); line-height: 1.28; }
  .question-content p { font-size: 11px; line-height: 1.6; }
  .card-bottom { gap: 8px; padding-top: 8px; letter-spacing: 0; font-size: 9px; }
  #question-number { flex: 1; line-height: 1.6; }
  .turn-button { min-height: 44px; padding: 6px 0 6px 8px; font-size: 11px; gap: 6px; flex-shrink: 0; }
  .question-actions { flex-direction: column; gap: 4px; margin: 16px 0 8px; }
  #next-button { order: -1; width: 100%; min-height: 56px; justify-content: space-between; font-size: 14px; padding: 16px 22px; border-radius: 14px; }
  .skip-button { min-height: 44px; font-size: 12px; padding: 12px 14px; }
  .shortcut-hint { font-size: 10px; }
  .shortcut-hint kbd, .shortcut-hint kbd + span, .shortcut-hint .separator { display: none; }
  footer { justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 10px; padding-top: 12px; }
  .footer-flower { font-size: 18px; }
  .save-status { justify-content: center; flex-basis: 100%; margin: 2px 0 0; font-size: 9px; line-height: 1.5; text-align: center; }
  dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 600px; max-height: 85svh; max-height: 85dvh; border-radius: 24px 24px 0 0; padding: 26px max(24px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; }
  dialog::before { content: ''; display: block; width: 36px; height: 4px; background: #d2d8c7; border-radius: 4px; margin: -12px auto 22px; }
  dialog h2 { font-size: 28px; line-height: 1.15; }
  dialog p { font-size: 13px; }
  .dialog-header { align-items: flex-start; gap: 8px; }
  .library-item { min-height: 64px; padding: 20px 0; }
  .library-item small { font-size: 11px; }
  .library-item span { font-size: 21px; }
  .dialog-actions { flex-direction: column-reverse; gap: 8px; }
  .dialog-actions .primary-button { min-height: 52px; font-size: 14px; border-radius: 12px; }
  .library-reset { font-size: 12px; }
  #toast { bottom: calc(20px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 40px); text-align: center; line-height: 1.5; }
}

@media (max-width: 850px) and (max-height: 740px) {
  .sidebar { row-gap: 6px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
  main { padding-top: 12px; }
  .conversation { padding-top: 18px; }
  .intro { margin-bottom: 18px; }
  .intro > .eyebrow { display: none; }
  .intro h1 { font-size: 26px; margin-top: 0; }
  .question-card { min-height: 280px; }
}

@media (max-width: 850px) and (orientation: landscape) {
  .intro h1 em { display: inline; }
  .conversation { width: min(100%, 680px); }
  .question-card { min-height: 250px; }
  .question-actions { flex-direction: row; gap: 20px; }
  #next-button { width: auto; min-width: 260px; order: 0; }
}

@media (max-width: 850px) {
  .sidebar { row-gap: 6px; }
  .category-icon { line-height: 22px; }
  .conversation { padding-top: 18px; }
  .intro { margin-bottom: 18px; }
  .question-ornament { font-size: 44px; }
  .question-content { padding-bottom: 14px; }
  #question-hint { display: none; }
}

.category-button[data-category="5"].selected {
  background: #eee1d8;
  border-color: #dfc9bd;
}
.category-button[data-category="5"] .category-check {
  border-color: #ddc3b8;
}
.category-button[data-category="5"].selected .category-check {
  background: #a87164;
  border-color: #a87164;
}

/* Fit the conversation to the live phone viewport, including Safari's toolbars. */
@media (max-width: 850px) {
  body { overflow: hidden; }
  .app { height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
  .sidebar {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  }
  .brand > span { font-size: 32px; }
  .brand svg { width: 26px; }
  .category-heading { grid-row: 2; grid-column: 2; margin: 0; }
  .category-heading > span { display: none; }
  .category-heading .text-button { padding: 8px; min-width: 72px; font-size: 11px; text-decoration: none; }
  #categories { grid-row: 2; grid-column: 1; margin: 0; padding: 0; min-width: 0; align-items: center; }
  .category-button { height: 44px; padding: 8px 12px; }
  .library-actions { gap: 6px; }
  .library-button { border-radius: 12px; }
  main {
    flex: 1 1 0;
    min-height: 0;
    gap: 8px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .topbar { flex: 0 0 auto; }
  .couple { font-size: 11px; }
  .couple-dots i { width: 24px; height: 24px; }
  .conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    flex: 1 1 0;
    min-height: 0;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 0;
  }
  .intro { margin: 0; }
  .intro > .eyebrow, .intro > p { display: none; }
  .intro h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.15; margin: 2px 0; }
  .app.has-question .intro { display: none; }
  .app.has-question .conversation { grid-template-rows: minmax(0, 1fr) auto; }
  .question-card { height: 100%; min-height: 0; min-width: 0; padding: 10px 16px; border-radius: 20px; overflow: hidden; }
  .card-top, .card-bottom { flex: 0 0 auto; }
  .question-content { flex: 1 1 0; min-height: 0; padding: 4px 0 8px; }
  .question-ornament { display: none; }
  .question-content h2, .question-content h2.long {
    flex: 0 0 auto;
    margin: 0;
    max-width: 100%;
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.24;
    letter-spacing: -.5px;
  }
  .question-content.needs-scroll { overflow-y: auto; justify-content: flex-start; overscroll-behavior: contain; }
  .card-bottom { padding-top: 4px; }
  .question-actions { display: flex; flex-direction: row; gap: 8px; margin: 0; }
  #next-button { flex: 1 1 0; min-width: 0; width: auto; order: 0; min-height: 52px; padding: 12px 16px; gap: 8px; font-size: 13px; border-radius: 13px; }
  #next-label { text-align: left; line-height: 1.3; }
  #skip-button { flex: 0 0 105px; min-height: 52px; padding: 8px 2px; font-size: 11px; line-height: 1.4; }
  #skip-button > span { margin-left: 4px; }
  .shortcut-hint { display: none; }
  footer { flex: 0 0 auto; padding: 0; min-height: 14px; }
  .footer-flower, footer > span:nth-child(2) { display: none; }
  .save-status { flex-basis: auto; margin: 0; font-size: 8px; line-height: 1.3; }
}

@media (max-width: 850px) and (max-height: 600px) {
  .intro { display: none; }
  .conversation { grid-template-rows: minmax(0, 1fr) auto; }
}

@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body { overflow: hidden; }
  .app { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
  .sidebar { display: grid; flex: 0 0 auto; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { grid-row: 1; grid-column: 1; min-height: 44px; gap: 6px; }
  .brand > span { font-size: 28px; }
  .brand svg { width: 24px; }
  .brand-caption, .category-note, .category-heading, .category-subtitle, .category-check, .progress-heading, .progress-track, #progress-caption, .reset-button, .library-label, .intro, .topbar, .shortcut-hint, .question-ornament, #question-hint { display: none; }
  #categories { grid-row: 1; grid-column: 2; display: flex; gap: 8px; overflow-x: auto; min-width: 0; margin: 0; padding: 0; scrollbar-width: none; }
  .category-button { flex: 0 0 auto; width: auto; min-height: 44px; padding: 8px 12px; margin: 0; border-radius: 24px; border-color: var(--line); }
  .category-icon { width: 20px; font-size: 22px; line-height: 22px; }
  .category-name { margin: 0; font-size: 12px; }
  .sidebar-bottom { grid-row: 1; grid-column: 3; margin: 0; }
  .library-actions { display: flex; gap: 6px; border: 0; padding: 0; }
  .library-button { width: auto; min-height: 44px; padding: 8px; gap: 4px; }
  .count { margin: 0; }
  main { flex: 1 1 0; min-height: 0; padding: 8px max(16px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 6px; }
  .conversation, .app.has-question .conversation { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; flex: 1 1 0; min-height: 0; width: min(100%, 760px); padding: 0; margin: 0 auto; }
  .question-card { height: 100%; min-height: 0; padding: 6px 16px; overflow: hidden; }
  .question-content { min-height: 0; flex: 1 1 0; padding: 2px 0 4px; }
  .question-content h2, .question-content h2.long { margin: 0; font-size: 28px; line-height: 1.2; flex: 0 0 auto; }
  .question-content.needs-scroll { overflow-y: auto; justify-content: flex-start; }
  .icon-button, .turn-button { min-height: 44px; }
  .card-top, .card-bottom { flex: 0 0 auto; }
  .card-bottom { padding-top: 0; }
  .question-actions { display: flex; flex-direction: row; gap: 16px; margin: 0; }
  #next-button { min-width: 0; width: auto; flex: 1; min-height: 48px; padding: 10px 18px; order: 0; }
  #skip-button { flex: 0 0 120px; min-height: 48px; }
  footer { min-height: 12px; padding: 0; }
  .footer-flower, footer > span:nth-child(2) { display: none; }
  .save-status { margin: 0; flex-basis: auto; font-size: 8px; }
}