:root {
  --burgundy: #c20c55;
  --burgundy-dark: #8e093f;
  --coral: #e34c55;
  --gold: #f2b832;
  --teal: #42aeb8;
  --teal-dark: #247b82;
  --cream: #fffaf2;
  --paper: #fffdf9;
  --ink: #2b2022;
  --muted: #6a5b5e;
  --line: #e9d9d2;
  --focus: #135e96;
  --shadow: 0 16px 42px rgba(142, 9, 63, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(242,184,50,.2), transparent 24rem),
    radial-gradient(circle at 93% 22%, rgba(66,174,184,.15), transparent 22rem),
    var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .8rem 1rem; background: #fff; color: var(--burgundy); border-radius: 10px; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px clamp(18px, 4vw, 44px);
}
.brand { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; }
.brand strong { display: block; color: var(--burgundy-dark); font-family: Georgia, serif; font-size: clamp(.95rem, 2vw, 1.12rem); line-height: 1.15; }
.brand small { display: block; margin-top: .25rem; color: var(--muted); font-size: .72rem; }
.brand-logo { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; }
.mode-switch { min-height: 48px; border: 1.5px solid rgba(104,29,57,.23); background: rgba(255,255,255,.7); color: var(--burgundy); border-radius: 999px; padding: .65rem 1rem; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 750; }
.mode-switch:hover { background: #fff; }

main { max-width: 980px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 50px; }
.hero { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 44px auto 34px; }
.eyebrow, .step-kicker { color: var(--burgundy); text-transform: uppercase; letter-spacing: .12em; font-weight: 850; font-size: .78rem; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.08; }
h1 { display: block; margin: .55rem 0 .7rem; color: var(--burgundy-dark); font-size: clamp(2.6rem, 8vw, 5.3rem); letter-spacing: -.045em; }
.hero-copy { max-width: 650px; margin: 0 auto; font-size: clamp(1.08rem, 2.3vw, 1.3rem); color: #54464a; }
.privacy-note { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.35rem; padding: .65rem 1rem; border-radius: 999px; background: rgba(255,255,255,.72); color: #5f4f53; font-size: .88rem; }
.privacy-note span { color: var(--coral); font-size: 1.1rem; }
.sync-pill { display: flex; align-items: center; justify-content: center; gap: .5rem; width: max-content; max-width: 100%; margin: .7rem auto 0; color: var(--muted); font-size: .82rem; font-weight: 750; }
.sync-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(233,173,58,.18); }
.sync-pill[data-state="online"] .sync-dot { background: #39755f; box-shadow: 0 0 0 4px rgba(57,117,95,.16); }
.sync-pill[data-state="offline"] .sync-dot { background: #a84242; box-shadow: 0 0 0 4px rgba(168,66,66,.14); }

.app-shell { background: rgba(255,253,249,.96); border: 1px solid rgba(104,29,57,.12); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 5vw, 48px); min-height: 500px; position: relative; overflow: hidden; }
.app-shell::before { content: ""; position: absolute; width: 220px; height: 38px; top: 0; right: -12px; background: linear-gradient(90deg, var(--burgundy), var(--coral), var(--gold), var(--teal)); opacity: .88; border-radius: 0 0 0 90%; transform: rotate(-3deg); transform-origin: right top; }
.progress-wrap { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-weight: 750; font-size: .85rem; margin-bottom: 2.25rem; }
.progress-track { flex: 1; height: 8px; border-radius: 999px; background: #f0e3de; overflow: hidden; }
.progress-track span { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), var(--coral), var(--gold), var(--teal)); transition: width .35s ease; }
.step { display: none; animation: rise .32s ease both; }
.step.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step h2, .facilitator-heading h2 { margin: .4rem 0 .65rem; font-size: clamp(2rem, 5vw, 3.35rem); color: var(--burgundy-dark); }
.supporting { margin: 0 0 1.6rem; color: var(--muted); font-size: 1.03rem; }

.path-grid, .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.path-card, .choice-card, .expression-card {
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.path-card:hover, .choice-card:hover, .expression-card:hover { transform: translateY(-2px); border-color: var(--coral); box-shadow: 0 10px 24px rgba(85,27,45,.09); }
.path-card { min-height: 190px; padding: 1.35rem; display: flex; flex-direction: column; justify-content: flex-end; }
.path-card strong { display: block; font-family: Georgia, serif; color: var(--burgundy-dark); font-size: 1.35rem; }
.path-card small { display: block; color: var(--muted); margin-top: .35rem; font-size: .94rem; }
.path-icon { display: block; margin-bottom: auto; width: 64px; height: 64px; }
.path-icon.brush { border-radius: 70% 30% 60% 40%; background: linear-gradient(135deg, var(--burgundy) 0 32%, var(--coral) 33% 55%, var(--gold) 56% 77%, var(--teal) 78%); transform: rotate(-10deg); }
.path-icon.sun { border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 9px rgba(233,173,58,.19), 16px 4px 0 -8px var(--coral), -14px 11px 0 -8px var(--burgundy); }
.back-button { min-height: 44px; border: 0; background: transparent; color: var(--burgundy); padding: 0; margin-bottom: 1.2rem; cursor: pointer; font-weight: 800; }
.skip-prompt { min-height: 48px; margin-top: 1rem; padding: .65rem .25rem; border: 0; background: transparent; color: var(--burgundy); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 800; }
.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { min-height: 94px; padding: 1rem; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: .8rem; font-weight: 780; }
.support-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--teal-dark); font-size: .8rem; }
.choice-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, white); background: var(--dot); }
.expression-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.expression-card { min-height: 132px; padding: 1rem .65rem; text-align: center; display: grid; place-items: center; align-content: center; gap: .7rem; }
.expression-card span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: #f7ebe7; color: var(--burgundy); font-family: Georgia, serif; font-size: 1.45rem; }

.result-card { position: relative; overflow: hidden; background: #fff7ee; border: 2px solid #eddbd1; border-radius: 22px; padding: clamp(22px, 5vw, 42px); text-align: center; }
.swatch { width: 78px; height: 78px; margin: .8rem auto 1rem; border-radius: 58% 42% 49% 51%; background: var(--swatch, var(--coral)); transform: rotate(-7deg); box-shadow: 10px 7px 0 color-mix(in srgb, var(--swatch, var(--coral)) 24%, transparent); }
.result-card h2 { margin-top: .4rem; }
.result-instruction { max-width: 620px; margin: 0 auto 1.2rem; font-size: clamp(1.15rem, 3vw, 1.35rem); font-weight: 720; }
.result-meaning { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: #fff; border-radius: 12px; }
.result-meaning span { color: var(--muted); font-size: .82rem; }
.gentle-note { max-width: 590px; margin: 1.2rem auto 0; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.primary-button, .secondary-button { min-height: 52px; border-radius: 999px; padding: .8rem 1.35rem; cursor: pointer; font-weight: 820; }
.primary-button { border: 2px solid var(--burgundy); color: #fff; background: var(--burgundy); }
.primary-button:hover { background: var(--burgundy-dark); }
.secondary-button { border: 2px solid #d9c5bd; color: var(--burgundy); background: #fff; }
.danger-button { min-height: 52px; border: 2px solid #a84242; border-radius: 999px; padding: .8rem 1.35rem; color: #8b2929; background: #fff; cursor: pointer; font-weight: 820; }
.danger-button:hover { color: #fff; background: #8b2929; }
.compact { min-height: 48px; white-space: nowrap; }
.completion-card { text-align: center; max-width: 680px; margin: 1.8rem auto; }
.completion-card h2 { font-size: clamp(2.2rem, 6vw, 4rem); }
.completion-card p { color: var(--muted); font-size: 1.1rem; }
.completion-mark { margin: 0 auto 1.2rem; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-dark); color: #fff; font-size: 2.3rem; box-shadow: 0 0 0 12px rgba(242,184,50,.24); }
.guest-canvas-wrap { position: relative; margin: 1.5rem auto .6rem; max-width: 620px; }
.guest-canvas-wrap canvas, .canvas-frame canvas, .dialog-canvas-wrap canvas { display: block; width: 100%; height: auto; background: #fffaf0; }
.guest-canvas-wrap canvas { border: 7px solid #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(68,24,38,.16); }
.mark-count { display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .75rem; border-radius: 999px; color: var(--burgundy); background: #fff0d2; font-size: .82rem; font-weight: 850; }
.guest-canvas-wrap .mark-count { position: absolute; right: 12px; bottom: 12px; box-shadow: 0 3px 12px rgba(67,24,37,.12); }

.facilitator-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.facilitator-heading h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: 0; }
.facilitator-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.facilitator-card { padding: 1.15rem; border: 1.5px solid var(--line); border-radius: 18px; background: #fff; }
.facilitator-card.featured { grid-column: 1 / -1; background: #fff6e4; border-color: #e9cf9b; }
.facilitator-card h3 { margin: .35rem 0; color: var(--burgundy); font-size: 1.35rem; }
.facilitator-card p { margin: 0; color: #5d5052; }
.number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--burgundy); color: #fff; font-weight: 850; }
.script { font-size: 1.04rem; }
.insight-panel { margin-top: 22px; padding: clamp(16px, 3vw, 28px); border: 1.5px solid rgba(36,123,130,.28); border-radius: 20px; background: #f0fbfb; }
.insight-panel h3 { margin: .25rem 0 0; color: var(--burgundy-dark); font-size: clamp(1.55rem, 4vw, 2.2rem); }
.insight-intro { margin: 0 0 1rem; color: var(--muted); }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.insight-grid article { min-height: 126px; padding: 1rem; border: 1px solid rgba(36,123,130,.2); border-radius: 16px; background: #fff; }
.insight-grid span, .insight-grid small { display: block; color: var(--muted); font-size: .82rem; }
.insight-grid strong { display: block; margin: .35rem 0; color: var(--teal-dark); font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.2; }
.facilitator-canvas { margin-top: 22px; padding: clamp(16px, 3vw, 28px); border: 1.5px solid #e4c99c; border-radius: 20px; background: #fff8e9; }
.canvas-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 14px; }
.canvas-heading h3 { margin: .25rem 0 0; color: var(--burgundy-dark); font-size: clamp(1.55rem, 4vw, 2.2rem); }
.canvas-frame { overflow: hidden; border: 9px solid #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(69,23,38,.16); background: #fff; }
.canvas-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.storage-note { margin: 13px 0 0; color: var(--muted); font-size: .86rem; }
.facilitator-tools { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 20px; padding: 1rem 1.15rem; border-radius: 18px; background: #f6ece8; }
.facilitator-tools p { margin: .2rem 0 0; color: var(--muted); }

.canvas-dialog { width: min(96vw, 1180px); max-width: none; max-height: 96vh; margin: auto; padding: clamp(16px, 3vw, 30px); border: 0; border-radius: 24px; color: var(--ink); background: var(--cream); box-shadow: 0 28px 80px rgba(30,9,16,.36); }
.canvas-dialog::backdrop { background: rgba(31,10,18,.78); backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 15px; }
.dialog-heading h2 { margin: .25rem 0 0; color: var(--burgundy-dark); font-size: clamp(1.8rem, 5vw, 3rem); }
.dialog-close { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border: 2px solid #d7c3bc; border-radius: 50%; color: var(--burgundy); background: #fff; cursor: pointer; font-size: 2rem; line-height: 1; }
.dialog-canvas-wrap { overflow: hidden; border: 10px solid #fff; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(69,23,38,.14); }
.dialog-count { margin: 12px 0 0; text-align: center; color: var(--muted); font-weight: 800; }

footer { text-align: center; color: #6b5a5e; padding: 0 20px 35px; font-size: .82rem; }
footer p { margin: .25rem 0; }

@media (max-width: 720px) {
  .site-header { align-items: flex-start; }
  .brand small { display: none; }
  .mode-switch { padding: .6rem .75rem; font-size: .82rem; }
  .hero { margin-top: 26px; }
  .privacy-note { border-radius: 16px; text-align: left; }
  .app-shell { padding: 20px 16px 24px; border-radius: 20px; }
  .path-grid, .choice-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 150px; }
  .expression-grid { grid-template-columns: repeat(2, 1fr); }
  .facilitator-heading, .facilitator-tools { align-items: stretch; flex-direction: column; }
  .facilitator-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .facilitator-card.featured { grid-column: auto; }
  .canvas-heading { align-items: flex-start; flex-direction: column; }
  .canvas-actions > button { width: 100%; }
  .guest-canvas-wrap .mark-count { position: static; margin-top: 10px; }
  .canvas-dialog { width: 97vw; padding: 14px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --line: #735d63; --muted: #403538; }
  .app-shell, .path-card, .choice-card, .expression-card { border-color: #735d63; }
}