:root {
  color-scheme: dark;
  --ink: #f7f8fb;
  --muted: rgba(241, 245, 249, 0.66);
  --pink: #ff3ca2;
  --navy: #061827;
  --panel: rgba(35, 67, 80, 0.5);
  --glass: rgba(219, 230, 237, 0.22);
  --line: rgba(255, 255, 255, 0.32);
  --shadow: 0 30px 90px rgba(6, 22, 34, 0.38);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #b9c9d3; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { border: 0; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(255, 60, 162, 0.72); outline-offset: 3px; }
img { display: block; }
.app-shell { min-height: 100vh; overflow-x: hidden; }

.prototype-demo-controls { position: fixed; z-index: 20; left: max(16px, calc(50% - 407px)); top: 50%; width: 142px; display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 18px; background: rgba(8,36,54,0.29); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 27px rgba(1,15,26,0.11); backdrop-filter: blur(18px) saturate(0.92); transform: translateY(-50%); }
.prototype-demo-controls > span { padding: 2px 4px 5px; color: rgba(244,250,253,0.62); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.prototype-demo-controls button { min-height: 36px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.18); border-radius: 11px; color: rgba(247,252,254,0.76); background: rgba(3,22,36,0.32); font-size: 0.66rem; text-align: left; }
.prototype-demo-controls button:hover { color: white; border-color: rgba(255,255,255,0.42); background: rgba(3,22,36,0.58); }
.prototype-demo-controls button:disabled { cursor: default; opacity: 0.38; }
.prototype-simulated-result { position: fixed; z-index: 20; left: max(16px, calc(50% - 561px)); top: 50%; width: 142px; display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(255,255,255,0.4); border-radius: 18px; background: rgba(8,36,54,0.29); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 27px rgba(1,15,26,0.11); backdrop-filter: blur(18px) saturate(0.92); transform: translateY(-50%); }
.prototype-simulated-result[hidden] { display: none; }
.prototype-simulated-result > span { color: rgba(244,250,253,0.62); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.prototype-simulated-result > strong { color: rgba(247,252,254,0.88); font-size: 0.72rem; font-weight: 650; line-height: 1.4; }

.screen { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 38px; overflow: hidden; background: url("assets/backgrounds/scenic-mountains.png") center / cover no-repeat; }
.screen::before { content: ""; position: absolute; inset: -24px; z-index: 0; background: rgba(226, 238, 243, 0.06); backdrop-filter: blur(11px) saturate(0.94); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.045; mix-blend-mode: soft-light; background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0 0.55px, rgba(10,25,32,0.38) 0.8px 1.1px, transparent 1.35px 3px); background-size: 4px 4px; }

.landing-scene,
.studio-shell,
.formation-shell,
.reveal-shell,
.why-shell,
.date-shell {
  position: relative;
  z-index: 1;
  width: min(450px, calc(100vw - 64px));
  height: min(800px, calc(100vh - 76px));
  min-height: 700px;
  margin: auto;
  padding: 88px 28px 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 50px;
  background: rgba(40, 70, 82, 0.44);
  box-shadow: 0 24px 62px rgba(22, 45, 57, 0.24), 0 0 0 12px rgba(247, 251, 252, 0.24);
  backdrop-filter: blur(18px) saturate(0.96);
}

.landing-scene::before,
.studio-shell::before,
.formation-shell::before,
.reveal-shell::before,
.why-shell::before,
.date-shell::before {
  content: "Ditto";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  color: white;
  font-size: 1.55rem;
  font-weight: 780;
  letter-spacing: -0.03em;
}

.landing-scene::after,
.studio-shell::after,
.formation-shell::after,
.reveal-shell::after,
.why-shell::after,
.date-shell::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  top: 66px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
}

.eyebrow, .nav-kicker, .pass-kicker { margin: 0; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.primary-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin-top: 18px; padding: 8px 9px 8px 18px; border: 1px solid rgba(255,255,255,0.38); border-radius: 999px; color: var(--pink); background: rgba(255,255,255,0.94); font-size: 0.9rem; font-weight: 720; box-shadow: 0 12px 28px rgba(0,0,0,0.18); transition: transform 180ms var(--ease), background 180ms ease; }
.primary-action:hover { transform: translateY(-2px); background: white; }
.primary-action .arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: var(--pink); }
.pass-avatar, .application-photo, .sheet-photo, .node-photo, .group-portrait, .why-avatar, .date-portrait { object-fit: cover; object-position: var(--photo-position, 50% 25%); }

/* Landing */
.landing-scene { display: block; }
.landing-copy-block { text-align: center; }
.landing-copy-block .eyebrow { display: none; }
.landing-copy-block h1 { max-width: 330px; margin: 14px auto 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: clamp(2.7rem, 6vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: 0; }
.landing-copy-block > p { max-width: 300px; margin: 18px auto 0; color: rgba(255,255,255,0.8); font-size: 0.94rem; line-height: 1.55; }
.landing-actions { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 11px; }
.landing-actions .primary-action { width: 100%; margin: 0; }
.landing-pass-stack { position: relative; height: 350px; margin-top: 34px; }
.pass-edge { position: absolute; left: 2%; right: 2%; height: 88%; bottom: 0; border: 1px solid rgba(255,255,255,0.25); border-radius: 28px; }
.pass-edge-one { background: rgba(3,16,27,0.62); transform: translateY(14px) rotate(-1deg); }
.pass-edge-two { background: rgba(205,221,231,0.18); transform: translateY(7px) rotate(1deg); }
.landing-pass { position: absolute; inset: 0 1% 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.44); border-radius: 28px; background: rgba(6,22,35,0.7); box-shadow: 0 20px 50px rgba(0,0,0,0.28); backdrop-filter: blur(16px); animation: passLift 700ms var(--ease) both; }
.landing-pass::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 59%; pointer-events: none; opacity: 0.075; mix-blend-mode: soft-light; background-image: repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9) 0 0.45px, rgba(30,18,12,0.42) 0.7px 0.95px, transparent 1.2px 2.8px); background-size: 4px 4px; }
.landing-group-photo { width: 100%; height: 59%; object-fit: cover; object-position: 50% 50%; filter: blur(0.35px) saturate(0.86) contrast(0.96) brightness(1.03) sepia(0.05); opacity: 0.92; transform: scale(1.008); }
.landing-pass-content { height: 41%; display: grid; align-content: center; gap: 16px; padding: 20px 22px; }
.landing-pass-content h2 { margin: 6px 0 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 1.65rem; font-weight: 400; letter-spacing: 0; }
.avatar-strip { display: flex; }
.pass-avatar { width: 38px; height: 38px; margin-right: -7px; border: 2px solid rgba(255,255,255,0.9); border-radius: 50%; }

/* Applications */
.studio-shell { padding-left: 18px; padding-right: 18px; }
.studio-nav { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 34px; }
.studio-nav > div { display: none; }
.nav-button { justify-self: start; padding: 6px 0; color: rgba(255,255,255,0.82); background: transparent; font-size: 0.78rem; }
.nav-button::before { content: "<"; margin-right: 6px; }
.nav-count { justify-self: end; color: var(--muted); font-size: 0.76rem; }
.studio-heading { margin: 16px 4px 18px; }
.studio-heading h1 { margin: 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 1.9rem; font-weight: 400; letter-spacing: 0; }
.studio-heading p { margin: 3px 0 0; color: var(--muted); font-size: 0.78rem; }
.application-deck { position: relative; z-index: 1; max-height: 470px; overflow-y: auto; padding: 2px 2px 82px; scrollbar-width: none; }
.application-deck::-webkit-scrollbar { display: none; }
.application-pass { position: relative; width: 100%; min-height: 90px; margin: 0 0 13px; display: grid; grid-template-columns: 72px 28px 1fr 22px; align-items: center; gap: 11px; padding: 9px 14px 9px 9px; overflow: hidden; text-align: left; color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 22px; background: rgba(39,68,81,0.42); box-shadow: 0 9px 22px rgba(0,0,0,0.1); backdrop-filter: blur(13px); animation: passIn 500ms var(--ease) both; animation-delay: var(--delay); transition: transform 190ms var(--ease); }
.application-pass:hover, .application-pass:focus-visible { z-index: 20; transform: translateY(-5px) scale(1.01); }
.application-pass::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.application-photo { width: 72px; height: 70px; border-radius: 16px; }
.application-number { color: rgba(255,255,255,0.42); font-size: 0.68rem; }
.application-pass-copy strong, .application-pass-copy small { display: block; }
.application-pass-copy strong { font-size: 0.92rem; }
.application-pass-copy small { margin-top: 2px; color: var(--muted); font-size: 0.68rem; }
.application-pass-copy .application-intentions { margin-top: 5px; color: rgba(255,255,255,0.82); font-size: 0.61rem; line-height: 1.25; }
.pass-open { color: rgba(255,255,255,0.55); }
.studio-actions { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 26px; display: flex; justify-content: stretch; padding-top: 10px; }
.studio-actions .primary-action { width: 100%; margin: 0; }

/* Featured POV selector */
.profile-selector-shell { padding: 90px 18px 20px; }
.profile-selector-heading { margin: 0 4px 18px; }
.profile-selector-heading h1 { margin: 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 2rem; font-weight: 400; line-height: 1.08; letter-spacing: 0; }
.profile-selector-heading > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.featured-profile-deck { display: grid; gap: 10px; }
.featured-profile-pass { min-height: 88px; grid-template-columns: 70px minmax(0, 1fr) 20px; gap: 11px; margin: 0; }
.featured-profile-copy { min-width: 0; display: grid; gap: 5px; }
.featured-profile-identity { display: flex; align-items: baseline; gap: 7px; }
.featured-profile-identity strong { font-size: 0.92rem; }
.featured-profile-identity small { color: var(--muted); font-size: 0.66rem; }
.featured-profile-copy > .application-intentions { color: rgba(255,255,255,0.82); font-size: 0.61rem; line-height: 1.25; }
.featured-profile-signals { min-width: 0; display: flex; gap: 5px; overflow: hidden; }
.featured-profile-signals small { min-width: 0; padding: 3px 6px; overflow: hidden; color: rgba(255,255,255,0.68); border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }

/* Applicant detail */
.sheet-layer[aria-hidden="true"] { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(2,10,17,0.54); backdrop-filter: blur(8px); }
.application-sheet { position: fixed; left: 50%; bottom: max(18px, calc((100vh - 800px) / 2 + 18px)); z-index: 11; width: min(430px, calc(100% - 30px)); max-height: min(700px, calc(100vh - 52px)); overflow: auto; padding: 22px; color: white; border: 1px solid rgba(255,255,255,0.34); border-radius: 36px; background: rgba(28,58,75,0.68); box-shadow: 0 24px 64px rgba(0,0,0,0.24); backdrop-filter: blur(22px); transform: translateX(-50%); animation: sheetUp 340ms var(--ease) both; }
.application-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(255,255,255,0.38); }
.sheet-close { position: absolute; z-index: 3; right: 18px; top: 18px; padding: 8px 12px; border-radius: 999px; color: white; background: rgba(255,255,255,0.16); }
.sheet-pass { position: relative; min-height: 165px; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; padding: 10px 54px 10px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.32); border-radius: 24px; background: rgba(178,197,211,0.2); }
.sheet-photo { width: 120px; height: 142px; border-radius: 18px; }
.sheet-identity h2 { margin: 5px 0; font-size: 1.75rem; }
.sheet-identity p { margin: 0; color: var(--muted); font-size: 0.76rem; }
.sheet-number { position: absolute; right: 14px; bottom: 10px; color: rgba(255,255,255,0.28); font-size: 1.8rem; font-weight: 760; }
.sheet-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 27px 3px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sheet-row h3 { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sheet-row p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.42; }
.sheet-row.two-column { grid-template-columns: 1fr; }
.sheet-row.two-column > div { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-row small { padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.prompt-list { margin: 0; padding: 0; list-style: none; }
.prompt-list li { padding: 6px 0; color: var(--muted); font-size: 0.76rem; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Formation */
.formation-shell h1 { margin: 28px auto 0; text-align: center; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 2.15rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; }
.formation-visual { position: relative; height: 540px; margin-top: 28px; overflow: hidden; }
.formation-pass-shadow { position: absolute; left: 7%; right: 7%; height: 220px; top: 34%; opacity: 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 28px; }
.formation-pass-shadow.shadow-one { background: rgba(4,18,29,0.6); animation: shadowSettle 1.1s var(--ease) 3.8s forwards; }
.formation-pass-shadow.shadow-two { background: rgba(197,211,222,0.14); animation: shadowSettleTwo 1.1s var(--ease) 4s forwards; }
.formation-node { position: absolute; left: var(--x); top: var(--y); width: 76px; min-height: 106px; display: grid; justify-items: center; gap: 6px; padding: 6px; border: 0; border-radius: 19px; background: rgba(24,51,66,0.54); box-shadow: 0 10px 22px rgba(0,0,0,0.14); transform: translate(-50%,-50%); animation: nodeIn 560ms var(--ease) both, nodeExplore 3.2s ease-in-out 700ms both; animation-delay: var(--delay),700ms; }
.formation-node.selected { animation: nodeIn 560ms var(--ease) both, nodeExplore 3.2s ease-in-out 700ms both, selectedSettle 1.1s var(--ease) 3.9s forwards; }
.formation-node.alternate { animation: nodeIn 560ms var(--ease) both, nodeExplore 3.2s ease-in-out 700ms both, alternateFade 1s var(--ease) 3.8s forwards; }
.node-photo { width: 64px; height: 72px; border-radius: 13px; }
.formation-node span { font-size: 0.68rem; font-weight: 650; }

/* Reveal */
.group-pass-stack { position: relative; height: 610px; margin-top: 20px; }
.group-pass-edge { position: absolute; left: 1%; right: 1%; height: 92%; bottom: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 28px; }
.group-pass-edge.edge-one { background: rgba(214,229,236,0.12); backdrop-filter: blur(12px); transform: translateY(14px) rotate(-1deg); }
.group-pass-edge.edge-two { background: rgba(236,244,247,0.1); backdrop-filter: blur(10px); transform: translateY(7px) rotate(1deg); }
.group-pass { position: absolute; inset: 0 0 18px; display: grid; grid-template-rows: 62px 1fr 140px; overflow: hidden; border: 1px solid rgba(255,255,255,0.42); border-radius: 30px; background-color: rgba(215,230,237,0.14); background-image: repeating-radial-gradient(circle at 22% 28%, rgba(255,255,255,0.36) 0 0.45px, rgba(16,39,52,0.16) 0.75px 1px, transparent 1.25px 3px); background-size: 4px 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 38px rgba(4,22,32,0.13); backdrop-filter: blur(18px) saturate(0.92); }
.group-pass header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.group-pass header p { margin: 0; font-size: 1rem; font-weight: 700; }
.group-pass header span { color: var(--muted); font-size: 0.72rem; }
.group-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); width: 100%; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; gap: 2px; background: rgba(255, 255, 255, 0.16); }
.reveal-collage-wrap { min-height: 0; display: flex; align-items: center; padding: 0 14px; }
.group-pass-portraits { box-shadow: 0 14px 30px rgba(4,17,26,0.16); }
.group-pass-portraits figure { position: relative; min-width: 0; margin: 0; overflow: hidden; animation: portraitIn 560ms var(--ease) both; animation-delay: var(--delay); }
.group-portrait { width: 100%; height: 100%; }
.group-pass-portraits figcaption { position: absolute; inset: auto 0 0; padding: 28px 7px 9px; color: rgba(255,255,255,0.92); background: linear-gradient(transparent, rgba(4,17,27,0.7)); font-size: 0.62rem; font-weight: 650; text-align: center; }
.group-pass footer { display: grid; gap: 14px; padding: 18px 20px; }
.group-names { color: var(--muted); font-size: 0.72rem; }
.group-pass footer .primary-action { width: 100%; margin: 0; }

/* Why */
.why-pass-stack { position: relative; height: 610px; margin-top: 20px; }
.why-pass-edge { position: absolute; inset: 10px 0 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 28px; background: rgba(196,211,222,0.14); transform: rotate(-1deg); }
.why-pass { position: absolute; inset: 0 0 16px; display: grid; grid-template-rows: 238px 1fr auto; gap: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; background: rgba(22,50,66,0.52); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.why-pass header { display: grid; gap: 12px; }
.why-pass h1 { margin: 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 2.1rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; }
.why-portraits { height: 188px; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.why-avatar { width: 100%; height: 100%; min-width: 0; border-radius: 16px; }
.reason-copy { min-height: 0; display: grid; align-content: center; gap: 9px; }
.reason-fact { margin: 0; color: var(--muted); font-size: 0.66rem; line-height: 1.35; }
.reason-stack { display: grid; gap: 14px; align-content: center; }
.reason-stack span { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 22px; background: rgba(30,60,77,0.48); font-size: 0.82rem; animation: reasonIn 500ms var(--ease) both; animation-delay: var(--delay); }
.reason-stack span:nth-child(2) { width: 86%; margin-left: auto; }
.reason-stack span:nth-child(3) { width: 94%; }
.why-pass .primary-action { width: 100%; margin: 0; }

/* Date */
.date-screen { height: 100vh; min-height: 0; }
.date-pass-stack { position: relative; height: 610px; margin-top: 20px; }
.date-pass-edge { position: absolute; left: 1%; right: 1%; height: 93%; bottom: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 28px; }
.date-pass-edge.edge-one { background: rgba(3,16,27,0.64); transform: translateY(14px) rotate(-1deg); }
.date-pass-edge.edge-two { background: rgba(196,211,222,0.16); transform: translateY(7px) rotate(1deg); }
.date-pass { position: absolute; inset: 0 0 18px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; background: rgba(22,50,66,0.54); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.date-collage-wrap { padding: 12px clamp(34px, 14%, 52px) 0; }
.date-portrait { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.date-details { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 24px; scrollbar-width: none; }
.date-details::-webkit-scrollbar { display: none; }
.date-details h1 { margin: 8px 0 0; font-family: "Bodoni 72", Didot, Georgia, serif; font-size: 2.15rem; font-weight: 400; line-height: 1.04; letter-spacing: 0; }
.date-lede { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.date-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.date-meta span { display: block; color: rgba(255,255,255,0.45); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.date-meta strong { display: block; margin-top: 3px; color: white; font-size: 0.7rem; }
.plan-reasons { display: grid; gap: 3px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.14); }
.plan-reasons > span { color: rgba(255,255,255,0.56); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.plan-reasons p { margin: 0; color: rgba(255,255,255,0.82); font-size: 0.62rem; line-height: 1.28; }
.plan-reasons p::before { content: "• "; color: rgba(255,255,255,0.48); }
.date-details-with-reasons { padding-top: 14px; }
.date-details-with-reasons h1 { margin-top: 4px; }
.date-details-with-reasons .date-lede { margin-top: 8px; }
.date-details-with-reasons .date-meta { margin-top: 10px; }
.date-details-with-reasons .plan-reasons { gap: 2px; margin-top: 8px; padding-top: 5px; }
.date-details .primary-action { position: static; width: 100%; margin: 18px 0 0; }

/* Participant mode */
.phone-screen::before { backdrop-filter: blur(14px) saturate(0.9); }
.participant-demo-stage { position: relative; z-index: 1; }
.phone-frame { position: relative; z-index: 1; width: min(420px, calc(100vw - 64px)); height: min(800px, calc(100vh - 76px)); }
.phone-hardware { position: relative; width: 100%; height: 100%; padding: 12px; border: 1px solid rgba(255,255,255,0.46); border-radius: 50px; background: rgba(240,247,250,0.2); box-shadow: 0 24px 62px rgba(22,45,57,0.22), 0 0 0 11px rgba(248,251,252,0.22); backdrop-filter: blur(16px); }
.dynamic-island { position: absolute; z-index: 4; top: 22px; left: 50%; width: 116px; height: 32px; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone-status { position: absolute; z-index: 5; top: 28px; left: 32px; right: 32px; display: flex; justify-content: space-between; color: #151515; font-size: 0.75rem; font-weight: 720; }
.messages-app { height: 100%; overflow: hidden; border-radius: 39px; color: #111; background: white; }
.messages-header { display: grid; grid-template-columns: 25px 42px 1fr; align-items: center; gap: 9px; height: 104px; padding: 38px 16px 12px; border-bottom: 1px solid rgba(0,0,0,0.08); background: rgba(250,250,250,0.97); }
.back-chevron { color: #007aff; font-size: 1.6rem; }
.ditto-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; background: var(--pink); box-shadow: 0 6px 14px rgba(255,60,162,0.28); }
.ditto-avatar::before { content: "d"; font-size: 1.15rem; font-weight: 780; }
.messages-header strong, .messages-header small { display: block; }
.messages-header strong { font-size: 0.94rem; }
.messages-header small { color: #777; font-size: 0.7rem; }
.message-date { margin-top: 15px; text-align: center; color: #8d8d92; font-size: 0.68rem; }
.message-thread { height: calc(100% - 126px); min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 22px 12px 34px; scroll-behavior: auto; scrollbar-width: none; }
.message-thread::-webkit-scrollbar { display: none; }
.conversation-stack { min-width: 0; display: grid; gap: 10px; min-height: 100%; align-content: start; }
.message-row { min-width: 0; display: flex; width: 100%; animation: bubbleIn 380ms var(--ease) both; }
.incoming-row, .attachment-row { justify-content: flex-start; }
.outgoing-row { justify-content: flex-end; }
.typing-indicator, .message-bubble { max-width: 78%; border-radius: 18px; animation: bubbleIn 380ms var(--ease) both; }
.typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; background: #e9e9eb; }
.typing-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: typingDot 900ms ease-in-out infinite; }
.typing-indicator i:nth-child(2) { animation-delay: 130ms; }
.typing-indicator i:nth-child(3) { animation-delay: 260ms; }
.message-bubble { padding: 9px 12px; background: #e9e9eb; }
.message-bubble p { margin: 0; color: #111; font-size: 1rem; line-height: 1.3; }
.message-bubble p + p { margin-top: 8px; }
.message-bubble.outgoing { color: white; background: #0b84ff; }
.message-bubble.outgoing p { color: white; }
.participant-control-row { justify-content: stretch; }
.message-actions { width: 100%; display: grid; gap: 7px; }
.message-action, .inline-primary, .inline-secondary { min-height: 44px; border-radius: 14px; font-size: 0.84rem; font-weight: 700; transition: transform 180ms var(--ease), opacity 180ms ease, background 180ms ease; }
.message-action:hover, .inline-primary:hover, .inline-secondary:hover { transform: translateY(-1px); }
.message-action.primary, .inline-primary { color: white; background: var(--pink); box-shadow: 0 8px 18px rgba(255,60,162,0.2); }
.message-action.secondary, .inline-secondary { color: #37373c; background: #ececf1; }
.message-action:disabled, .inline-primary:disabled, .inline-secondary:disabled { cursor: default; opacity: 0.48; transform: none; box-shadow: none; }
.participant-control-row.is-complete, .attachment-row.is-complete { opacity: 0.58; }
.conversation-time-jump { display: flex; align-items: center; gap: 10px; margin: 15px 0 7px; color: #8d8d92; font-size: 0.68rem; text-align: center; }
.conversation-time-jump::before, .conversation-time-jump::after { content: ""; height: 1px; flex: 1; background: #dedee3; }
.conversation-time-jump span { white-space: nowrap; }
.participant-typing-row { min-height: 42px; }

/* Participant Mode: group browser */
.participant-browser { width: 100%; min-width: 0; max-width: 100%; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 9px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.participant-browser::-webkit-scrollbar { display: none; }
.participant-profile-card { flex: 0 0 226px; overflow: hidden; border: 1px solid rgba(0,0,0,0.07); border-radius: 20px; color: #17171a; background: #f6f6f8; box-shadow: 0 8px 20px rgba(23,26,31,0.08); scroll-snap-align: start; animation: passIn 500ms var(--ease) both; animation-delay: var(--delay); }
.participant-profile-card.is-self { flex-basis: 190px; background: #fafafa; }
.participant-profile-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--photo-position, 50% 25%); }
.participant-profile-card.is-self .participant-profile-photo { aspect-ratio: 1 / 1; }
.participant-profile-copy { display: grid; gap: 3px; padding: 13px; }
.participant-profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.participant-profile-heading strong { font-size: 1rem; }
.participant-profile-heading span { padding: 3px 7px; border-radius: 999px; color: #75757b; background: #e9e9ed; font-size: 0.6rem; }
.participant-profile-copy small { color: #727278; font-size: 0.68rem; }
.participant-profile-copy p { margin: 5px 0 0; color: #45454a; font-size: 0.73rem; line-height: 1.38; }
.participant-interest-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.participant-interest-list span { padding: 4px 7px; border-radius: 999px; color: #4d4d52; background: white; font-size: 0.61rem; }

/* Participant Mode: confirmation and planning */
.confirmation-progress, .planning-progress, .availability-picker, .postcard-upload-card, .anonymous-postcard-picker, .group-live-card { width: 100%; padding: 14px; border: 1px solid rgba(0,0,0,0.07); border-radius: 18px; color: #242428; background: #f4f4f7; box-shadow: 0 8px 20px rgba(28,31,36,0.06); }
.confirmation-line, .planning-step { position: relative; min-height: 36px; display: flex; align-items: center; padding: 7px 8px 7px 31px; color: #85858b; font-size: 0.76rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.confirmation-line:last-child, .planning-step:last-child { border-bottom: 0; }
.confirmation-line::before, .planning-step::before { content: ""; position: absolute; left: 8px; width: 10px; height: 10px; border: 1.5px solid #b5b5ba; border-radius: 50%; }
.confirmation-line.is-complete, .planning-step.is-complete { color: #242428; }
.confirmation-line.is-complete::before, .planning-step.is-complete::before { content: "\2713"; display: grid; place-items: center; width: 15px; height: 15px; color: white; border: 0; background: #34c759; font-size: 0.58rem; }
.planning-step { transition: color 220ms ease; }

/* Participant Mode: availability */
.availability-picker .participant-kicker { margin-bottom: 10px; }
.availability-grid { --availability-columns: minmax(104px, 1fr) 60px 68px 60px; --availability-column-gap: 7px; width: 100%; min-width: 0; display: grid; gap: 7px; margin-bottom: 13px; }
.availability-grid-header, .availability-grid-row { width: 100%; min-width: 0; display: grid; grid-template-columns: var(--availability-columns); column-gap: var(--availability-column-gap); align-items: center; }
.availability-grid-header span { min-width: 0; color: #77777d; text-align: center; white-space: nowrap; font-size: 0.54rem; font-weight: 700; line-height: 1.1; }
.availability-grid-header span:first-child { text-align: left; }
.availability-grid-day { min-width: 0; overflow: hidden; color: #414146; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; line-height: 1.2; }
.availability-grid-option { position: relative; min-height: 34px; display: grid; place-items: center; cursor: pointer; }
.availability-grid-option input { position: absolute; opacity: 0; pointer-events: none; }
.availability-grid-option span { width: 100%; height: 34px; display: grid; place-items: center; border: 1px solid #dedee3; border-radius: 9px; background: white; transition: border 160ms ease, background 160ms ease; }
.availability-grid-option span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #b7b7bc; border-radius: 4px; }
.availability-grid-option input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.availability-grid-option input:checked + span { border-color: rgba(255,60,162,0.35); background: #fff2f8; }
.availability-grid-option input:checked + span::before { content: "\2713"; display: grid; place-items: center; color: white; border-color: var(--pink); background: var(--pink); font-size: 0.62rem; }
.availability-picker .inline-primary, .postcard-upload-card .inline-primary, .anonymous-postcard-picker > .inline-primary { width: 100%; }

/* Participant Mode: experience */
.participant-experience-card { width: 100%; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); border-radius: 22px; color: #17171a; background: #f6f6f8; box-shadow: 0 12px 28px rgba(24,29,34,0.1); }
.participant-experience-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 46%; }
.experience-card-copy { display: grid; gap: 7px; padding: 16px; }
.participant-kicker { margin: 0; color: #8a8a90; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; }
.experience-card-copy h2 { margin: 0; font-family: inherit; font-size: 1.25rem; line-height: 1.08; letter-spacing: 0; }
.experience-card-copy > p:not(.participant-kicker) { margin: 0; color: #55555a; font-size: 0.78rem; line-height: 1.42; }
.experience-card-copy > span { color: #77777d; font-size: 0.7rem; }
.participant-experience-card.is-expanded > img { aspect-ratio: 16 / 9; }
.experience-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0; }
.experience-facts div { min-width: 0; padding: 9px; border-radius: 12px; background: white; }
.experience-facts span, .experience-facts strong { display: block; }
.experience-facts span { color: #8a8a90; font-size: 0.57rem; text-transform: uppercase; }
.experience-facts strong { margin-top: 3px; color: #333338; font-size: 0.67rem; line-height: 1.28; }
.experience-preview { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.experience-preview span { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #55555a; background: white; font-size: 0.61rem; }
.calendar-status { min-height: 0; color: #34a853; font-size: 0.67rem; }
.calendar-status:not(:empty) { padding: 7px 0; }
.inline-action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* Participant Mode: postcard pick */
.postcard-preview { min-height: 162px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #c8c8cd; border-radius: 16px; color: #8a8a90; background: white; font-size: 0.72rem; }
.postcard-preview img, .sent-postcard img, .anonymous-postcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.postcard-caption { width: 100%; min-height: 42px; margin: 10px 0 7px; padding: 10px 12px; border: 1px solid #d8d8dd; border-radius: 12px; color: #27272b; background: white; font: inherit; font-size: 0.76rem; }
.postcard-upload-card > p { margin: 0 0 11px; color: #7c7c82; font-size: 0.65rem; line-height: 1.35; }
.sent-postcard { width: 76%; overflow: hidden; border-radius: 18px; color: white; background: #0b84ff; }
.sent-postcard img { aspect-ratio: 4 / 5; }
.sent-postcard p { margin: 0; padding: 10px 11px 2px; font-size: 0.76rem; line-height: 1.35; }
.sent-postcard span { display: block; padding: 8px 11px 10px; color: rgba(255,255,255,0.76); font-size: 0.61rem; }
.anonymous-postcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.anonymous-postcard { overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 16px; color: #55555a; background: white; text-align: left; transition: border 180ms ease, transform 180ms var(--ease); }
.anonymous-postcard:hover { transform: translateY(-2px); }
.anonymous-postcard.is-selected { border-color: var(--pink); box-shadow: 0 8px 18px rgba(255,60,162,0.16); }
.anonymous-postcard span { display: block; padding: 8px 9px; font-size: 0.66rem; }

/* Café relationship booklet */
.relationship-booklet-form { display: grid; gap: 14px; }
.relationship-booklet-form section { display: grid; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.relationship-booklet-form section > p { margin: 0; color: rgba(250,253,255,0.92); font-size: 0.7rem; line-height: 1.4; }
.relationship-booklet-answer { width: 100%; min-height: 66px; resize: vertical; padding: 10px 11px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; color: white; background: rgba(4,25,40,0.34); font: inherit; font-size: 0.72rem; line-height: 1.42; outline: none; }
.relationship-booklet-answer::placeholder { color: rgba(242,249,252,0.5); }
.relationship-booklet-answer:focus { border-color: rgba(255,255,255,0.66); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.relationship-booklet-library { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.relationship-booklet-library[hidden], .relationship-booklet-reader[hidden], .relationship-booklet-choices[hidden] { display: none; }
.relationship-booklet-cover { position: relative; min-width: 0; aspect-ratio: 3 / 4; display: grid; align-content: space-between; overflow: hidden; padding: 17px 12px 13px 19px; border: 1px solid rgba(255,255,255,0.42); border-radius: 7px; color: white; text-align: left; box-shadow: 0 9px 18px rgba(3,18,28,0.18); transition: transform 160ms ease, box-shadow 160ms ease; }
.relationship-booklet-cover:hover { transform: translateY(-2px) rotate(-0.5deg); box-shadow: 0 12px 22px rgba(3,18,28,0.24); }
.relationship-booklet-cover.cover-a { background: #c86582; }
.relationship-booklet-cover.cover-b { background: #6f947e; }
.relationship-booklet-binding { position: absolute; inset: 0 auto 0 7px; width: 2px; background: rgba(255,255,255,0.36); }
.relationship-booklet-cover small { align-self: start; font-size: 0.54rem; font-weight: 700; text-transform: uppercase; }
.relationship-booklet-cover strong { font-family: Georgia, serif; font-size: 1.08rem; font-weight: 500; line-height: 1.05; }
.relationship-booklet-cover em { font-size: 0.58rem; font-style: normal; opacity: 0.78; }
.relationship-booklet-reader { min-height: 318px; }
.relationship-booklet-page { --booklet-accent: #c86582; min-height: 318px; display: flex; flex-direction: column; padding: 17px; border: 1px solid rgba(255,255,255,0.56); border-top: 7px solid var(--booklet-accent); border-radius: 7px; color: #24313a; background: #f8f7f3; box-shadow: 0 12px 23px rgba(3,18,28,0.2); }
.relationship-booklet-page.cover-b { --booklet-accent: #6f947e; }
.relationship-booklet-page-meta { display: flex; justify-content: space-between; color: #72777a; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; }
.relationship-booklet-page > p { margin: 32px 0 16px; font-family: Georgia, serif; font-size: 0.92rem; line-height: 1.34; }
.relationship-booklet-page blockquote { flex: 1; margin: 0; color: #4a5257; font-size: 0.76rem; line-height: 1.52; }
.relationship-booklet-page-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }
.relationship-booklet-page-controls .inline-secondary { color: #4f5b63; border-color: #cfd4d5; background: #eef0ed; }
.relationship-booklet-page-controls .inline-secondary:disabled { color: #a4aaad; opacity: 1; }
.relationship-booklet-back { align-self: center; margin-top: 10px; padding: 4px; color: #6d7478; background: transparent; font-size: 0.61rem; }
.relationship-booklet-choices { display: grid; gap: 10px; margin-top: 12px; }
.relationship-booklet-choices > p { margin: 0; color: rgba(247,251,253,0.78); font-size: 0.7rem; line-height: 1.35; }
.relationship-booklet-choice { min-height: 40px; padding: 9px 11px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; color: rgba(250,253,255,0.9); background: rgba(4,25,40,0.34); text-align: left; font-size: 0.7rem; }
.relationship-booklet-choice.is-selected { border-color: rgba(255,137,200,0.84); background: rgba(255,255,255,0.14); }

/* Participant Mode: reminder and live boundary */
.compact-reminder-card { width: 100%; display: grid; grid-template-columns: 92px 1fr; gap: 11px; padding: 8px; border: 1px solid rgba(0,0,0,0.07); border-radius: 17px; color: #27272b; background: #f4f4f7; }
.compact-reminder-card img { width: 92px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.compact-reminder-card div { display: grid; align-content: center; gap: 4px; }
.compact-reminder-card strong { font-size: 0.76rem; }
.compact-reminder-card span { color: #737379; font-size: 0.64rem; line-height: 1.3; }
.group-live-status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #303034; font-size: 0.75rem; font-weight: 700; }
.group-live-status i { width: 9px; height: 9px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 5px rgba(52,199,89,0.12); animation: livePulse 1.8s ease-in-out infinite; }

/* Participant Mode: scenic Ditto private thread visual system */
.phone-screen::before { background: rgba(222, 235, 241, 0.04); backdrop-filter: blur(14px) saturate(0.92); }
.phone-hardware { border-color: rgba(255,255,255,0.62); background: rgba(229,240,245,0.2); box-shadow: 0 24px 66px rgba(15,40,53,0.2), 0 0 0 11px rgba(247,251,252,0.25); backdrop-filter: blur(18px) saturate(0.94); }
.phone-status { color: rgba(255,255,255,0.92); text-shadow: 0 1px 7px rgba(6,22,34,0.45); }
.messages-app { position: relative; isolation: isolate; color: rgba(250,253,255,0.96); background: url("assets/backgrounds/scenic-mountains.png") center / cover no-repeat; }
.messages-app::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8,38,58,0.34), rgba(4,28,44,0.32) 48%, rgba(3,20,31,0.48)); backdrop-filter: blur(5px) saturate(0.9); }
.messages-app::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.065; mix-blend-mode: soft-light; background-image: repeating-radial-gradient(circle at 18% 24%, rgba(255,255,255,0.95) 0 0.5px, rgba(20,45,60,0.42) 0.8px 1.05px, transparent 1.3px 3px); background-size: 4px 4px; }
.messages-header { position: relative; z-index: 1; grid-template-columns: 25px 1fr 25px; gap: 0; height: 104px; border-color: rgba(255,255,255,0.28); background: rgba(8,30,45,0.08); backdrop-filter: blur(8px); }
.messages-header::after { content: ""; width: 25px; }
.back-chevron { color: rgba(255,255,255,0.94); text-shadow: 0 1px 7px rgba(4,20,31,0.42); }
.messages-wordmark { justify-self: center; color: white; font-size: 1.06rem; font-weight: 760; text-shadow: 0 1px 8px rgba(4,20,31,0.5); }
.message-date { position: relative; z-index: 1; color: rgba(247,252,255,0.7); text-shadow: 0 1px 5px rgba(4,20,31,0.4); }
.message-thread { position: relative; z-index: 1; padding: 24px 14px 38px; }
.conversation-stack { gap: 13px; }
.typing-indicator, .message-bubble { border: 1px solid rgba(255,255,255,0.42); background: rgba(11,42,61,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 22px rgba(2,17,27,0.1); backdrop-filter: blur(17px) saturate(0.92); }
.typing-indicator { background: rgba(22,54,72,0.3); }
.typing-indicator i { background: rgba(250,253,255,0.9); }
.message-bubble { padding: 11px 13px; border-radius: 21px 21px 21px 6px; }
.message-bubble p { color: rgba(255,255,255,0.97); font-size: 0.9rem; line-height: 1.44; letter-spacing: 0; text-shadow: 0 1px 4px rgba(3,18,28,0.24); }
.message-bubble p + p { margin-top: 7px; }
.message-bubble.outgoing { border-color: rgba(255,255,255,0.32); border-radius: 21px 21px 6px 21px; background: rgba(3,22,36,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 22px rgba(1,14,23,0.17); }
.message-bubble.outgoing p { color: white; }
.message-actions { gap: 9px; }
.message-action, .inline-primary, .inline-secondary { min-height: 46px; border: 1px solid rgba(255,255,255,0.42); border-radius: 17px; font-size: 0.78rem; font-weight: 680; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px rgba(1,14,24,0.1); backdrop-filter: blur(15px); }
.message-action.primary, .inline-primary { color: white; border-color: rgba(255,255,255,0.42); background: rgba(3,22,36,0.76); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 9px 22px rgba(3,15,25,0.17); }
.message-action.secondary, .inline-secondary { color: rgba(255,255,255,0.94); background: rgba(220,234,241,0.2); }
.message-action:hover, .inline-primary:hover, .inline-secondary:hover { border-color: rgba(255,255,255,0.66); }
.conversation-time-jump { color: rgba(246,251,254,0.68); text-shadow: 0 1px 4px rgba(4,20,31,0.28); }
.conversation-time-jump::before, .conversation-time-jump::after { background: rgba(246,251,254,0.3); }

/* A single consistent, human profile card proportion. */
.participant-browser { gap: 12px; padding: 2px 2px 12px; }
.participant-profile-card, .participant-profile-card.is-self { flex: 0 0 194px; height: 348px; display: grid; grid-template-rows: 218px 1fr; border-color: rgba(255,255,255,0.42); border-radius: 22px; color: rgba(250,253,255,0.96); background: rgba(8,36,54,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 26px rgba(2,16,27,0.12); backdrop-filter: blur(17px) saturate(0.92); }
.participant-profile-photo, .participant-profile-card.is-self .participant-profile-photo { height: 218px; aspect-ratio: auto; object-position: var(--photo-position, 50% 25%); }
.participant-profile-copy { align-content: start; min-height: 0; padding: 12px 13px; }
.participant-profile-heading strong { color: white; font-size: 0.93rem; font-weight: 700; text-shadow: 0 1px 4px rgba(3,18,28,0.24); }
.participant-profile-heading span { color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.3); background: rgba(4,25,40,0.3); }
.participant-profile-copy small, .participant-interest-list { display: none; }
.participant-profile-copy p { margin: 7px 0 0; color: rgba(244,250,253,0.76); font-size: 0.69rem; line-height: 1.42; }

.confirmation-progress, .planning-progress, .availability-picker, .postcard-upload-card, .anonymous-postcard-picker, .group-live-card { border-color: rgba(255,255,255,0.4); border-radius: 22px; color: rgba(250,253,255,0.95); background: rgba(8,36,54,0.29); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 27px rgba(1,15,26,0.11); backdrop-filter: blur(18px) saturate(0.92); }
.confirmation-line, .planning-step { border-color: rgba(246,251,254,0.18); color: rgba(241,249,252,0.68); }
.confirmation-line::before, .planning-step::before { border-color: rgba(245,251,254,0.58); }
.confirmation-line.is-complete, .planning-step.is-complete { color: rgba(255,255,255,0.96); }
.confirmation-line.is-complete::before, .planning-step.is-complete::before { color: #142b3c; background: #edf8fb; }
.availability-grid-header span { color: rgba(241,249,252,0.66); }
.availability-grid-day { color: rgba(250,253,255,0.92); }
.availability-grid-option span { border-color: rgba(255,255,255,0.3); background: rgba(4,25,40,0.36); }
.availability-grid-option span::before { border-color: rgba(242,250,253,0.62); }
.availability-grid-option input:checked + span { border-color: rgba(255,166,211,0.58); background: rgba(255,255,255,0.16); }
.availability-grid-option input:checked + span::before { color: white; border-color: rgba(255,91,178,0.76); background: rgba(255,91,178,0.76); }

.participant-experience-card { border-color: rgba(255,255,255,0.42); border-radius: 24px; color: rgba(250,253,255,0.96); background: rgba(8,36,54,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 15px 31px rgba(1,14,24,0.13); backdrop-filter: blur(18px) saturate(0.92); }
.participant-experience-card > img { filter: saturate(0.94) contrast(0.96) brightness(1.03); }
.experience-card-copy { gap: 8px; padding: 17px; }
.participant-kicker { color: rgba(241,249,252,0.68); }
.experience-card-copy h2 { color: white; font-size: 1.17rem; font-weight: 720; line-height: 1.18; text-shadow: 0 1px 4px rgba(3,18,28,0.22); }
.experience-card-copy > p:not(.participant-kicker), .experience-card-copy > span { color: rgba(244,250,253,0.8); }
.experience-facts div { border: 1px solid rgba(255,255,255,0.22); background: rgba(4,25,40,0.32); }
.experience-facts span { color: rgba(238,248,252,0.58); }
.experience-facts strong { color: rgba(255,255,255,0.94); }
.experience-preview span { color: rgba(247,251,253,0.78); border: 1px solid rgba(255,255,255,0.2); background: rgba(4,25,40,0.28); }
.calendar-status { color: #d7f1e3; }

.postcard-preview { border-color: rgba(255,255,255,0.4); color: rgba(243,250,253,0.72); background: rgba(4,25,40,0.26); }
.postcard-caption { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.94); background: rgba(4,25,40,0.34); }
.postcard-caption::placeholder { color: rgba(242,249,252,0.56); }
.postcard-upload-card > p { color: rgba(241,249,252,0.7); }
.sent-postcard { border: 1px solid rgba(255,255,255,0.34); background: rgba(3,22,36,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.anonymous-postcard { border-color: rgba(255,255,255,0.3); background: rgba(4,25,40,0.34); color: rgba(247,251,253,0.84); }
.anonymous-postcard.is-selected { border-color: rgba(255,137,200,0.84); box-shadow: 0 9px 20px rgba(255,75,167,0.12); }
.compact-reminder-card { border-color: rgba(255,255,255,0.38); color: rgba(250,253,255,0.96); background: rgba(8,36,54,0.29); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); backdrop-filter: blur(17px); }
.compact-reminder-card span { color: rgba(243,250,253,0.72); }
.group-live-status { color: rgba(255,255,255,0.96); }
.group-live-status i { background: #e6f6ed; box-shadow: 0 0 0 5px rgba(230,246,237,0.13); }

/* Participant Mode: live-date mechanics */
.prototype-pov-switch { position: absolute; left: calc(100% + 28px); top: 50%; width: 118px; display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 18px; background: rgba(8,36,54,0.29); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 27px rgba(1,15,26,0.11); backdrop-filter: blur(18px) saturate(0.92); transform: translateY(-50%); }
.prototype-pov-switch[hidden] { display: none; }
.prototype-pov-switch > span { padding: 2px 4px 5px; color: rgba(244,250,253,0.62); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.prototype-pov-switch button { position: relative; min-height: 34px; padding: 6px 9px; border: 1px solid transparent; border-radius: 11px; color: rgba(247,252,254,0.74); background: rgba(3,22,36,0.28); font-size: 0.68rem; text-align: left; }
.prototype-pov-switch button.is-active { color: white; border-color: rgba(255,255,255,0.4); background: rgba(3,22,36,0.7); }
.prototype-pov-switch button.has-pending-action::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,0.88); border-radius: 50%; background: #ff89c8; box-shadow: 0 0 0 2px rgba(3,22,36,0.6); pointer-events: none; }
.live-date-time { margin-top: 20px; }
.live-message-time { display: block; margin-top: 6px; color: rgba(244,250,253,0.54); font-size: 0.56rem; font-weight: 620; line-height: 1; }
.message-bubble.outgoing .live-message-time { text-align: right; }
.live-date-control { width: 100%; }
.private-name-prompt { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.35); border-radius: 19px; background: rgba(8,36,54,0.27); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); backdrop-filter: blur(17px) saturate(0.92); }
.private-name-prompt input { min-width: 0; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.28); border-radius: 13px; color: white; background: rgba(3,22,36,0.48); font: inherit; font-size: 0.78rem; outline: none; }
.private-name-prompt input::placeholder { color: rgba(242,249,252,0.5); }
.private-name-prompt input:focus { border-color: rgba(255,255,255,0.65); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.private-name-prompt .message-action { width: 72px; min-height: 44px; }
.fair-private-form { width: 100%; display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.35); border-radius: 19px; background: rgba(8,36,54,0.27); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); backdrop-filter: blur(17px) saturate(0.92); }
.fair-private-form select, .fair-private-form textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.28); border-radius: 13px; color: white; background: rgba(3,22,36,0.7); font: inherit; font-size: 0.78rem; outline: none; }
.fair-private-form select { height: 44px; }
.fair-private-form textarea { resize: none; line-height: 1.4; }
.fair-private-form textarea::placeholder { color: rgba(242,249,252,0.5); }
.fair-private-form select:focus, .fair-private-form textarea:focus { border-color: rgba(255,255,255,0.65); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.fair-private-form .message-action { width: 100%; min-height: 44px; }
.fair-attraction-options { width: 100%; display: grid; gap: 8px; }
.fair-attraction-options .message-action { width: 100%; }
.inline-message-validation { grid-column: 1 / -1; min-height: 0; margin: 0 2px; color: rgba(255,220,232,0.95); font-size: 0.65rem; line-height: 1.35; }
.inline-message-validation:empty { display: none; }
.prototype-time-control { width: 100%; display: grid; gap: 7px; padding: 9px 10px; border: 1px dashed rgba(255,255,255,0.3); border-radius: 15px; background: rgba(3,22,36,0.2); }
.prototype-time-control span { color: rgba(244,250,253,0.5); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; }
.prototype-time-control button { min-height: 38px; border-radius: 11px; color: rgba(255,255,255,0.88); background: rgba(3,22,36,0.5); font-size: 0.68rem; font-weight: 650; }
.prototype-time-control button:disabled { cursor: default; opacity: 0.45; }
.postcard-reveal-pass,
.live-task-card,
.mbti-read-card,
.quiet-live-state,
.pairing-summary-card,
.private-form-card,
.side-conversation-card {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 22px;
  color: rgba(250,253,255,0.96);
  background: rgba(8,36,54,0.29);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 12px 27px rgba(1,15,26,0.11);
  backdrop-filter: blur(18px) saturate(0.92);
}

.postcard-reveal-pass { overflow: hidden; }
.postcard-reveal-pass > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.92) contrast(0.96) brightness(1.04); }
.postcard-owner-reveal { display: flex; align-items: baseline; gap: 6px; padding: 14px 15px 11px; }
.postcard-owner-reveal span { color: rgba(244,250,253,0.66); font-size: 0.7rem; }
.postcard-owner-reveal strong { color: white; font-size: 1.12rem; font-weight: 720; animation: ownerFade 700ms var(--ease) both; }
.pairing-pass-line { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; background: rgba(3,22,36,0.38); }
.pairing-pass-avatar { width: 38px; height: 38px; object-fit: cover; object-position: var(--photo-position, 50% 25%); border-radius: 12px; }
.pairing-pass-line span, .pairing-pass-line strong { display: block; }
.pairing-pass-line span { color: rgba(240,248,252,0.58); font-size: 0.58rem; text-transform: uppercase; }
.pairing-pass-line strong { margin-top: 2px; font-size: 0.76rem; }

.live-task-card { display: grid; gap: 12px; padding: 14px; }
.task-pair-block { padding: 11px; border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; background: rgba(3,22,36,0.3); }
.task-pair-block span, .task-pair-block strong { display: block; }
.task-pair-block span { color: rgba(244,250,253,0.62); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; }
.task-pair-block strong { margin-top: 5px; font-size: 0.76rem; font-weight: 620; line-height: 1.42; }
.task-footer { display: flex; justify-content: space-between; gap: 12px; color: rgba(244,250,253,0.68); font-size: 0.62rem; line-height: 1.35; }
.task-footer span:last-child { text-align: right; }
.meme-reference-picker { width: 100%; display: grid; gap: 9px; }
.meme-reference-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.meme-reference-frame { min-width: 0; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,0.28); border-radius: 8px; color: rgba(247,251,253,0.86); background: rgba(3,22,36,0.34); }
.meme-reference-frame img { width: 100%; aspect-ratio: 3 / 2; display: block; object-fit: contain; background: rgba(3,22,36,0.5); }
.meme-reference-frame figcaption { min-height: 30px; display: grid; align-items: center; padding: 6px; font-size: 0.58rem; line-height: 1.25; }
.meme-reference-picker > .message-action { width: 100%; }
.paradise-card > strong { font-size: 1.05rem; }
.paradise-card > p, .side-conversation-card > p { margin: 0; color: rgba(244,250,253,0.76); font-size: 0.72rem; line-height: 1.48; }
.paradise-reward { padding: 10px 11px; border-radius: 14px; background: rgba(235,245,249,0.12); }
.paradise-reward span, .paradise-reward strong { display: block; }
.paradise-reward span { color: rgba(245,251,254,0.58); font-size: 0.58rem; text-transform: uppercase; }
.paradise-reward strong { margin-top: 4px; font-size: 0.72rem; line-height: 1.35; }

.quiet-live-state { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 10px; padding: 13px; }
.quiet-live-state i { width: 9px; height: 9px; border-radius: 50%; background: rgba(238,249,252,0.95); box-shadow: 0 0 0 5px rgba(238,249,252,0.11); animation: livePulse 1.8s ease-in-out infinite; }
.quiet-live-state span { font-size: 0.72rem; }
.quiet-live-state .inline-primary { grid-column: 1 / -1; margin-top: 4px; }

.mbti-read-card { display: grid; gap: 10px; padding: 15px; text-align: center; }
.mbti-read-card > strong { font-size: 2rem; font-weight: 560; letter-spacing: 0.08em; }
.mbti-read-card > span { color: rgba(244,250,253,0.7); font-size: 0.69rem; }
.compact-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.compact-choice-grid .inline-secondary { min-width: 0; min-height: 40px; padding: 7px 5px; }

.pairing-summary-card { display: grid; gap: 6px; padding: 14px; }
.pairing-summary-card > span { color: rgba(241,249,252,0.6); font-size: 0.6rem; text-transform: uppercase; }
.pairing-summary-card > strong { font-size: 0.76rem; font-weight: 620; line-height: 1.42; }
.pairing-summary-card .inline-primary { margin-top: 5px; }

.private-form-card { display: grid; gap: 12px; padding: 14px; }
.private-form-card label { display: grid; gap: 6px; color: rgba(244,250,253,0.68); font-size: 0.62rem; font-weight: 650; }
.private-form-card select,
.private-form-card textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.29);
  border-radius: 13px;
  color: rgba(255,255,255,0.96);
  background: rgba(3,22,36,0.48);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  outline: none;
}
.private-form-card select:focus,
.private-form-card textarea:focus { border-color: rgba(255,255,255,0.62); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
.private-form-card select option { color: #132c3d; background: #eef5f7; }
.private-form-card textarea { min-height: 92px; resize: vertical; }
.private-form-card textarea::placeholder { color: rgba(242,249,252,0.46); }
.form-status { min-height: 0; margin: -4px 0 0; color: rgba(255,211,228,0.9); font-size: 0.62rem; line-height: 1.35; }
.form-status:empty { display: none; }

.side-conversation-card { display: grid; gap: 8px; padding: 16px; }
.side-conversation-card > span { color: rgba(244,250,253,0.6); font-size: 0.62rem; text-transform: uppercase; }
.side-conversation-card > strong { font-size: 1.12rem; font-weight: 680; }
.side-conversation-card .inline-action-pair { margin-top: 5px; }
.signal-deadline { margin: -2px 0 0; color: rgba(244,250,253,0.62); font-size: 0.61rem; line-height: 1.35; }

@keyframes ownerFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@keyframes livePulse { 0%,100% { transform: scale(0.9); opacity: 0.72; } 50% { transform: scale(1); opacity: 1; } }

@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes passLift { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes passIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { opacity: 0; transform: translate(-50%,24px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes nodeIn { from { opacity: 0; transform: translate(-50%,-42%) scale(0.9); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes nodeExplore { 0%,100% { margin: 0; } 40% { margin: -8px 0 0 10px; } 70% { margin: 8px 0 0 -10px; } }
@keyframes selectedSettle { to { left: var(--final-x); top: var(--final-y); transform: translate(-50%,-50%) scale(0.9); } }
@keyframes alternateFade { to { opacity: 0; transform: translate(-50%,-50%) scale(0.8); } }
@keyframes shadowSettle { from { opacity: 0; transform: translateY(16px) rotate(-1deg); } to { opacity: 0.8; transform: translateY(16px) rotate(-1deg); } }
@keyframes shadowSettleTwo { from { opacity: 0; transform: translateY(8px) rotate(1deg); } to { opacity: 0.9; transform: translateY(8px) rotate(1deg); } }
@keyframes portraitIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes reasonIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes phoneRise { from { opacity: 0; transform: translateY(30vh) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes typingDot { 0%,100% { opacity: 0.42; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 1160px) and (min-width: 701px) {
  .prototype-simulated-result { left: max(16px, calc(50% - 407px)); top: calc(50% + 112px); transform: none; }
}

@media (max-width: 700px) {
  .screen { padding: 0; }
  .landing-scene, .studio-shell, .formation-shell, .reveal-shell, .why-shell, .date-shell { width: 100vw; height: 100vh; min-height: 700px; border: 0; border-radius: 0; box-shadow: none; }
  .application-sheet { bottom: 8px; width: calc(100% - 16px); max-height: calc(100vh - 120px); }
  .phone-frame { width: 100vw; height: 100vh; }
  .phone-hardware { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .messages-app { border-radius: 0; }
  .dynamic-island { top: 10px; }
  .phone-status { top: 16px; }
  .messages-header { height: 90px; padding-top: 29px; }
  .participant-demo-stage { position: absolute; inset: 0; width: 100vw; height: 100vh; }
  .participant-demo-stage:has(.prototype-pov-switch:not([hidden])) .message-thread { padding-bottom: 104px; }
  .prototype-pov-switch { left: 10px; right: 10px; top: auto; bottom: 10px; z-index: 10; width: auto; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; transform: none; }
  .prototype-pov-switch > span { padding: 0 4px; }
  .prototype-pov-switch button { min-width: 0; padding: 6px 4px; text-align: center; }
  .prototype-demo-controls { position: relative; left: auto; top: auto; width: calc(100% - 20px); grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; margin: 10px auto; transform: none; }
  .prototype-demo-controls > span { padding: 0 4px; }
  .prototype-demo-controls button { min-width: 0; text-align: center; }
  .prototype-simulated-result { position: relative; left: auto; top: auto; width: calc(100% - 20px); margin: 10px auto; transform: none; }
}

@media (max-width: 380px) {
  .availability-grid { --availability-columns: minmax(82px, 1fr) 50px 58px 50px; --availability-column-gap: 4px; }
  .availability-grid-header span { font-size: 0.5rem; }
  .availability-grid-day { font-size: 0.64rem; }
}

@media (max-height: 760px) and (min-width: 701px) {
  .landing-scene, .studio-shell, .formation-shell, .reveal-shell, .why-shell, .date-shell { min-height: 680px; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }