:root {
  color-scheme: light;
  --ink: #17332e;
  --paper: #f3f0e7;
  --paper-deep: #e4ddd0;
  --moss: #1e5c4e;
  --moss-dark: #133e36;
  --coral: #d16a4f;
  --gold: #d8a947;
  --clay: #985a42;
  --line: #1e5c4e2b;
  --muted: #5f746d;
  --shadow: 0 22px 50px #17332e20;
  font-family: ui-rounded, "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; color: var(--ink); background: radial-gradient(circle at 8% 0%, #f8cf6e55 0 9rem, transparent 23rem), radial-gradient(circle at 100% 15%, #6fb49e35 0 14rem, transparent 27rem), var(--paper); }
button { font: inherit; }
.shell { width: min(100%, 740px); min-height: 100dvh; margin: auto; padding: clamp(1.5rem, 6vw, 4.25rem) clamp(1.1rem, 5vw, 2.75rem) 2rem; }
.masthead { text-align: center; }
.eyebrow, .card-kicker { margin: 0; color: var(--moss); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { text-wrap: balance; }
h1 { max-width: 12ch; margin: .32rem auto .6rem; font-family: Iowan Old Style, Georgia, serif; font-size: clamp(2.35rem, 9vw, 4.5rem); font-weight: 500; letter-spacing: -.065em; line-height: .93; }
.lede { max-width: 43ch; margin: 0 auto; color: var(--muted); font-size: clamp(.97rem, 2.8vw, 1.1rem); line-height: 1.5; }
.meter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 2rem auto 0; max-width: 29rem; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: .12rem .35rem; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff8; text-align: left; }
.meter span { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.meter strong { font-size: 1rem; }
.meter i { grid-column: 1 / -1; display: block; height: .28rem; border-radius: 999px; background: linear-gradient(90deg, var(--moss) var(--meter, 50%), #c6d0c9 var(--meter, 50%)); }
.deck-wrap { margin: clamp(2rem, 8vw, 4.3rem) auto 0; max-width: 31rem; }
.deck-meta { display: flex; justify-content: space-between; margin: 0 .25rem .65rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.card-stage { perspective: 1200px; }
.decision-card { position: relative; min-height: clamp(20rem, 79vw, 30rem); border-radius: 1.65rem; outline: none; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.75,.15,1), opacity .28s ease; cursor: pointer; touch-action: pan-y; user-select: none; }
.decision-card:focus-visible { outline: 4px solid #d8a94799; outline-offset: 5px; }
.decision-card.is-flipped { transform: rotateY(180deg); }
.decision-card.is-choosing { opacity: .32; transform: translateX(var(--nudge, 0)) rotate(var(--tilt, 0)); }
.card-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(1.35rem, 7vw, 2.5rem); overflow: hidden; border: 1px solid #fff8; border-radius: inherit; backface-visibility: hidden; box-shadow: var(--shadow), inset 0 0 0 1px #17332e10; }
.card-front { justify-content: flex-end; color: #f9f4e9; background: linear-gradient(160deg, #1b584b 0%, #123d36 48%, #0f2b28 100%); }
.card-front::before, .card-front::after { position: absolute; content: ""; border-radius: 50%; pointer-events: none; }
.card-front::before { width: 23rem; height: 23rem; top: -12rem; right: -9rem; background: radial-gradient(circle at 33% 62%, #f5c75b 0 4%, #e18a6144 5% 30%, transparent 59%); transform: rotate(-20deg); }
.card-front::after { width: 15rem; height: 15rem; bottom: -7.5rem; left: -5rem; border: 1px solid #f4cf7666; box-shadow: 0 0 0 2rem #f4cf760c, 0 0 0 4rem #f4cf7608; }
.card-front > *, .card-back > * { position: relative; z-index: 1; }
.card-front .card-kicker { color: #f4cf76; }
.card-face h2 { max-width: 14ch; margin: .55rem 0 .65rem; font-family: Iowan Old Style, Georgia, serif; font-size: clamp(2rem, 8vw, 3.35rem); font-weight: 500; line-height: .99; letter-spacing: -.05em; }
.card-face p:not(.card-kicker) { max-width: 30ch; margin: 0; font-size: clamp(1rem, 3.6vw, 1.2rem); line-height: 1.48; }
.turn-note { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1.7rem; color: #f8ecd0c9; font-size: .82rem; font-weight: 700; letter-spacing: .03em; }
.turn-note b { font-size: 1.25rem; }
.card-back { color: var(--ink); background: linear-gradient(150deg, #f8f1e2, #e9e2d4); transform: rotateY(180deg); }
.card-back h2 { margin-top: .6rem; font-size: clamp(1.75rem, 7vw, 2.7rem); }
.choice-preview { display: grid; grid-template-columns: 1.55rem 1fr; gap: .65rem; align-items: start; margin-top: .7rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.choice-preview span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--moss); color: #fff; font-size: .72rem; font-weight: 800; }
.choice-preview p { font-size: .97rem !important; line-height: 1.4 !important; }
.card-back .turn-note { color: var(--muted); }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.choice { min-height: 5rem; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 1rem; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.choice:hover { transform: translateY(-2px); box-shadow: 0 9px 20px #17332e18; }
.choice:focus-visible, .restart:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.choice span { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-bottom: .25rem; border-radius: 50%; font-size: .67rem; font-weight: 800; }
.choice strong, .choice small { display: block; }
.choice strong { font-size: .92rem; line-height: 1.15; }
.choice small { margin-top: .28rem; opacity: .72; font-size: .72rem; line-height: 1.25; }
.choice-pull { color: #fff7e7; background: var(--coral); border-color: #a94f3d; }
.choice-pull span { background: #fff4; }
.choice-void { color: #fff; background: var(--moss); border-color: #104137; }
.choice-void span { background: #fff3; }
.gesture-note { margin: .8rem 0 0; color: var(--muted); text-align: center; font-size: .78rem; }
.reflection { max-width: 35rem; margin: 3rem auto 0; padding: 2rem; border: 1px solid var(--line); border-radius: 1.5rem; background: #fff8; box-shadow: var(--shadow); }
.reflection h2 { margin: .45rem 0 .6rem; font-family: Iowan Old Style, Georgia, serif; font-size: 2.1rem; font-weight: 500; letter-spacing: -.04em; }
.reflection > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.55; }
.decision-log { display: grid; gap: .65rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.decision-log li { padding: .8rem; border-left: .25rem solid var(--gold); background: var(--paper); font-size: .86rem; line-height: 1.35; }
.decision-log b { display: block; margin-bottom: .16rem; }
.restart { padding: .8rem 1rem; border: 0; border-radius: .65rem; background: var(--ink); color: #fff; cursor: pointer; font-weight: 800; }
.provenance { margin: 3rem auto 0; max-width: 35rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.provenance summary { cursor: pointer; color: var(--moss); font-weight: 800; }
.provenance a { color: inherit; }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 19rem; padding: .7rem .9rem; border-radius: .7rem; background: var(--ink); color: #fff; font-size: .82rem; opacity: 0; transform: translateY(1rem); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 380px) { .shell { padding-inline: .9rem; } .meter { padding: .55rem .45rem; } .meter span { font-size: .62rem; } .choice { min-height: 5.6rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }