:root {
  --page: #e9e5dd;
  --panel: #fbfaf7;
  --panel-2: #f2efe9;
  --ink: #1e1e1e;
  --muted: rgba(30, 30, 30, 0.62);
  --line: rgba(30, 30, 30, 0.1);
  --today: #a3361f;
  --today-bg: rgba(163, 54, 31, 0.1);
  --soon: #8a5a07;
  --soon-bg: rgba(138, 90, 7, 0.12);
  --calm: #2f6b48;
  --calm-bg: rgba(47, 107, 72, 0.11);
  --info: #33568a;
  --info-bg: rgba(51, 86, 138, 0.1);
  --device-shadow: 0 30px 80px rgba(60, 45, 20, 0.22), 0 4px 14px rgba(60, 45, 20, 0.12);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #151412;
    --panel: #1e1d1a;
    --panel-2: #262420;
    --ink: #eceae4;
    --muted: rgba(236, 234, 228, 0.62);
    --line: rgba(236, 234, 228, 0.12);
    --today: #f0917c;
    --today-bg: rgba(240, 145, 124, 0.14);
    --soon: #e6b85c;
    --soon-bg: rgba(230, 184, 92, 0.14);
    --calm: #8fd0a8;
    --calm-bg: rgba(143, 208, 168, 0.13);
    --info: #9dbaf0;
    --info-bg: rgba(157, 186, 240, 0.13);
    --device-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #151412;
  --panel: #1e1d1a;
  --panel-2: #262420;
  --ink: #eceae4;
  --muted: rgba(236, 234, 228, 0.62);
  --line: rgba(236, 234, 228, 0.12);
  --today: #f0917c;
  --today-bg: rgba(240, 145, 124, 0.14);
  --soon: #e6b85c;
  --soon-bg: rgba(230, 184, 92, 0.14);
  --calm: #8fd0a8;
  --calm-bg: rgba(143, 208, 168, 0.13);
  --info: #9dbaf0;
  --info-bg: rgba(157, 186, 240, 0.13);
  --device-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
}

body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sf); font-size: 14px; padding-inline: 16px; }
.app { display: grid; grid-template-columns: 390px minmax(0, 440px); gap: 32px; justify-content: center; align-items: start; padding-block: 24px 40px; }
.device { position: relative; width: 390px; height: 844px; border-radius: 46px; overflow: hidden; box-shadow: var(--device-shadow); isolation: isolate; }

/* ---------- quiz: AIRI Liquid Glass ---------- */
.q { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; color: #1e1e1e; font-family: var(--sf); font-size: 17px; line-height: 22px;
  background: radial-gradient(34% 16% at 80% 13%, rgba(126, 168, 98, 0.39) 0%, rgba(126, 168, 98, 0) 70%), radial-gradient(28% 13% at 18% 8%, rgba(242, 156, 112, 0.35) 0%, rgba(242, 156, 112, 0) 70%), radial-gradient(30% 15% at 94% 44%, rgba(246, 204, 108, 0.35) 0%, rgba(246, 204, 108, 0) 70%), radial-gradient(36% 18% at 6% 54%, rgba(222, 122, 98, 0.27) 0%, rgba(222, 122, 98, 0) 70%), radial-gradient(46% 22% at 36% 92%, rgba(150, 184, 118, 0.29) 0%, rgba(150, 184, 118, 0) 70%), radial-gradient(64% 30% at 58% 26%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 72%), #efe9df; }
.q * { box-sizing: border-box; }
:where(.q) button, :where(.q) input { font: inherit; color: inherit; }
.q .graphite { color: #ffffff; }
.q :focus-visible { outline: none; box-shadow: 0 0 0 2px #1e1e1e, 0 0 0 4px #ebff86 !important; }
.q-in { position: absolute; inset: 0; display: flex; flex-direction: column; animation: qin 0.28s ease-out; }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.glass { border: 1px solid rgba(255, 255, 255, 0.5); background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.5) 100%); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 1px 1.5px 0 rgba(255, 255, 255, 0.8), inset -1px -1.5px 0 rgba(255, 255, 255, 0.4), inset 0 0 14px rgba(255, 255, 255, 0.24), 0 6px 18px rgba(70, 55, 30, 0.06); }
.lens { border: 1px solid #ffffff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 1px 1.5px 0 #ffffff, inset -1px -1.5px 0 rgba(255, 255, 255, 0.8), inset 0 -8px 16px rgba(120, 105, 80, 0.05), 0 0 0 2.5px rgba(255, 255, 255, 0.55), 0 0 0 3px rgba(30, 30, 30, 0.07), 0 10px 24px rgba(70, 55, 30, 0.1); }
.graphite { border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(74, 74, 74, 0.88) 0%, rgba(40, 40, 40, 0.92) 100%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 1px 1.5px 0 rgba(255, 255, 255, 0.28), inset -1px -1.5px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(30, 30, 30, 0.16); color: #ffffff; }

.hdr { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 0; }
.hdr-row { display: flex; justify-content: center; height: 44px; }
.logo { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 10px; border-radius: 9999px; font-weight: 600; }
.logo img { display: block; width: 26px; height: 26px; }
.prog { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: 9999px; font-size: 14px; line-height: 18px; }
.prog b { flex: none; font-weight: 600; }
.segs { flex: 1 1 0; min-width: 0; display: flex; gap: 4px; }
.seg { flex: 1 1 0; height: 6px; border-radius: 9999px; background: rgba(30, 30, 30, 0.12); overflow: hidden; }
.seg i { display: block; height: 6px; border-radius: 9999px; background: #333333; transition: width 0.45s ease; }
.prog span { flex: none; color: rgba(30, 30, 30, 0.65); }

.orb { flex: none; display: flex; justify-content: center; padding-top: 12px; }
.orb img { display: block; width: 104px; height: 104px; }
.orb.big img { width: 140px; height: 140px; }

.sheet { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 20px; border-radius: 40px 40px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.9); background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.5) 100%); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); box-shadow: inset 0 1px 0 #ffffff, 0 -8px 32px rgba(70, 55, 30, 0.06); }
.orb + .sheet { margin-top: 16px; }
.body { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 28px 20px 24px; scrollbar-width: none; }
.body::-webkit-scrollbar { display: none; }
.body.lock { overflow: hidden; padding-bottom: 0; }
.body.center { align-items: center; text-align: center; }
.foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 8px 20px 34px; }
.foot.appear { animation: qin 0.25s ease-out; }

.t { margin: 0; font-size: 24px; line-height: 29px; font-weight: 700; text-wrap: pretty; }
.tb { display: flex; flex-direction: column; gap: 8px; }
.tb.loose { gap: 12px; }
.s { margin: 0; font-size: 14px; line-height: 20px; color: rgba(30, 30, 30, 0.65); text-wrap: pretty; }
.b { margin: 0; font-size: 17px; line-height: 24px; color: rgba(30, 30, 30, 0.68); text-wrap: pretty; }
.b.ink { color: #1e1e1e; }
.b a { color: #1e1e1e; font-weight: 600; }
.fine a { color: #1e1e1e; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.b strong, .card strong { font-weight: 600; color: #1e1e1e; }

.opts { display: flex; flex-direction: column; gap: 10px; }
.cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 12px 20px 12px 24px; border-radius: 9999px; font-weight: 600; text-align: left; cursor: pointer; }
.cap svg { flex: none; }
.pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pic { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border-radius: 28px; text-align: left; cursor: pointer; overflow: hidden; }
.pic .art { display: flex; align-items: flex-end; justify-content: center; height: 150px; padding-top: 10px; }
.photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: rgba(30, 30, 30, 0.55); text-align: center; background: repeating-linear-gradient(135deg, rgba(90, 75, 50, 0.08) 0px, rgba(90, 75, 50, 0.08) 10px, rgba(90, 75, 50, 0.03) 10px, rgba(90, 75, 50, 0.03) 20px); }
.photo b { font-size: 13px; line-height: 17px; font-weight: 600; }
.photo small { font-size: 12px; line-height: 16px; }
.pic .photo { height: 212px; border-bottom: 1px solid rgba(30, 30, 30, 0.08); }
.hero { flex: none; display: flex; padding: 12px 16px 0; }
.hero .photo { flex: 1 1 0; height: 300px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 1px 1.5px 0 rgba(255, 255, 255, 0.8), inset -1px -1.5px 0 rgba(255, 255, 255, 0.4), 0 6px 18px rgba(70, 55, 30, 0.06); }
.hero .photo b { font-size: 14px; line-height: 18px; }
.hero + .sheet { margin-top: 16px; }
.hero .photo.banner { height: 180px; gap: 6px; padding: 14px 20px; color: rgba(30, 30, 30, 0.6); }
.hero .photo.banner b { font-size: 13px; line-height: 17px; text-wrap: balance; }
.hero.sq { justify-content: center; }
.hero.sq .photo { flex: none; width: 220px; height: 220px; gap: 6px; padding: 16px 18px; color: rgba(30, 30, 30, 0.6); }
.hero.sq .photo b { font-size: 13px; line-height: 17px; text-wrap: balance; }
.proof { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.proof .t { font-size: 28px; line-height: 34px; letter-spacing: -0.01em; text-wrap: balance; }
.proof .big { display: block; font-size: 60px; line-height: 64px; font-weight: 800; letter-spacing: -0.03em; }
.pic .lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 12px 14px 12px 18px; font-weight: 600; }

.list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: -6px -20px 0; padding: 6px 20px 56px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000000 0%, #000000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); }
.list::-webkit-scrollbar { display: none; }
.row { flex: none; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0; padding: 9px 20px 9px 9px; border-radius: 9999px; font-weight: 600; text-align: left; cursor: pointer; }
.disc { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: rgba(30, 30, 30, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.lbl { flex: 1 1 0; min-width: 0; text-wrap: pretty; }
.box { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; border: 1.75px solid rgba(30, 30, 30, 0.22); }
.row[aria-pressed="true"] .box { border: 0; background: #333333; }

.cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; margin: 0; padding: 0 24px; border-radius: 9999px; font-weight: 600; cursor: pointer; text-decoration: none; }
.q .cta:disabled { border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.35); color: rgba(30, 30, 30, 0.38); box-shadow: none; cursor: default; }
.cta.plain { height: 52px; border: 0; background: transparent; box-shadow: none; color: #1e1e1e; }

.card { display: flex; flex-direction: column; border-radius: 28px; }
.card.pad { padding: 16px 20px; }
.card .r { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.card .r + .r { border-top: 1px solid rgba(30, 30, 30, 0.08); }
.card .r p { margin: 0; font-size: 17px; line-height: 24px; color: rgba(30, 30, 30, 0.7); text-wrap: pretty; }
.card .r svg { flex: none; }
.card.note { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 24px; }
.card.note svg, .feat li svg { flex: none; }
.card.note p { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; text-wrap: pretty; }
.card.emph { border: 2px solid #333333; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 100%); box-shadow: inset 1px 1.5px 0 #ffffff, 0 10px 24px rgba(70, 55, 30, 0.1); }
blockquote.q-quote { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; text-wrap: pretty; }

.badge { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; }


.field { display: block; width: 100%; height: 60px; margin: 0; padding: 0 24px; border-radius: 9999px; font-size: 17px; }
.field::placeholder { color: rgba(30, 30, 30, 0.5); }
.err { margin: -12px 0 0; padding: 0 24px; font-size: 14px; line-height: 20px; color: #a3361f; }
.fine { display: flex; align-items: flex-start; gap: 10px; padding: 0 4px; }
.fine p { margin: 0; font-size: 14px; line-height: 20px; color: rgba(30, 30, 30, 0.7); text-wrap: pretty; }
.fine .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; line-height: 20px; }

.scale { display: flex; flex-direction: column; gap: 12px; }
.q[data-screen="S4-05"] .scale { gap: 14px; }
.scale .dots { display: flex; justify-content: space-between; }
.scale button { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0; padding: 0; border-radius: 9999px; font-weight: 600; cursor: pointer; }
.scale .ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 18px; color: rgba(30, 30, 30, 0.7); }
.scale .ends span + span { text-align: right; }
.q[data-screen="S4-05"] .scale .ends { color: rgba(30, 30, 30, 0.55); }

.status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px; font-size: 14px; line-height: 20px; }
.status img { width: 36px; height: 36px; flex: none; }

.steps { list-style: none; width: 100%; margin: 0; padding: 4px 16px; display: flex; flex-direction: column; border-radius: 28px; text-align: left; }
.steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 17px; line-height: 24px; }
.steps li + li { border-top: 1px solid rgba(30, 30, 30, 0.08); }
.steps .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; }
.steps .done .ic { background: #333333; }
.steps .now .ic { border: 2.5px solid rgba(30, 30, 30, 0.12); border-top-color: #1e1e1e; animation: spin 0.9s linear infinite; }
.steps .now { font-weight: 600; }
.steps .wait .ic { border: 1.75px solid rgba(30, 30, 30, 0.22); }
.steps .wait { color: rgba(30, 30, 30, 0.65); }
@keyframes spin { to { transform: rotate(360deg); } }

.tl { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; border-radius: 28px; }
.tl li { display: flex; gap: 14px; }
.tl .rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 16px; }
.tl .dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 9999px; border: 2px solid #333333; background: #ffffff; }
.tl li:first-child .dot { background: #333333; }
.tl .line { flex: 1 1 auto; width: 2px; min-height: 18px; margin-top: 4px; background: rgba(30, 30, 30, 0.12); }
.tl li:last-child .line { display: none; }
.tl .txt { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; }
.tl li:last-child .txt { padding-bottom: 0; }
.tl .d { font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(30, 30, 30, 0.7); }
.tl .w { font-size: 17px; line-height: 24px; font-weight: 600; text-wrap: pretty; }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: 28px; }
.feat li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 17px; line-height: 24px; font-weight: 600; text-wrap: pretty; }
.feat li + li { border-top: 1px solid rgba(30, 30, 30, 0.08); }

.commit { padding: 24px 20px; border-radius: 28px; }
.commit p { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; text-wrap: pretty; }
.commit strong { font-weight: 700; }
.hold { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 48px; }
.hold button { position: relative; display: grid; place-items: center; width: 77px; height: 77px; margin: 0; padding: 0; border-radius: 9999px; border: 4px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.08), 0 10px 24px rgba(70, 55, 30, 0.12); cursor: pointer; touch-action: none; }
.hold button::before { content: ""; position: absolute; inset: -4px; border-radius: 9999px; background: conic-gradient(#333333 calc(var(--p, 0) * 1turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 34px, #000 35px); mask: radial-gradient(circle, transparent 34px, #000 35px); }
.hold .core { width: 58px; height: 58px; border-radius: 9999px; }
.hold span.l { font-weight: 600; }
/* P-07: the brand lime floods the screen from the button while you hold; it sits behind the content */
.commit-in { isolation: isolate; }
.cfill { position: absolute; inset: 0; z-index: -1; background: #ebff86; clip-path: circle(var(--r, 0px) at var(--cx, 50%) var(--cy, 88%)); pointer-events: none; }
.hold .core { display: grid; place-items: center; transition: transform 0.2s ease; }
.hold button.on .core { transform: scale(0.92); }
.hold .core .ok { opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.hold.done .core .ok { opacity: 1; transform: none; }

.promo { flex: none; display: flex; justify-content: center; padding: 8px 16px 0; }
.promo div { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 9999px; font-size: 14px; line-height: 18px; }
.ph { padding: 0 4px; border-radius: 4px; background: rgba(30, 30, 30, 0.1); color: #1e1e1e; font-weight: 600; }
.graphite .ph { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.plan { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 0; padding: 14px 18px; border-radius: 28px; text-align: left; cursor: pointer; }
.plan .radio { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; border: 1.75px solid rgba(30, 30, 30, 0.22); }
.plan[aria-pressed="true"] .radio { border: 2px solid #333333; }
.plan[aria-pressed="true"] .radio::after { content: ""; width: 12px; height: 12px; border-radius: 9999px; background: #333333; }
.plan .nm { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan .pr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.plan .sm { font-size: 14px; line-height: 18px; color: rgba(30, 30, 30, 0.65); font-weight: 400; }
.plan .nm span:first-child, .plan .pr span:first-child { font-weight: 600; }
.terms { margin: 0; font-size: 14px; line-height: 20px; color: rgba(30, 30, 30, 0.68); text-align: center; text-wrap: pretty; }
.inside { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 28px; }
.inside h2 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.inside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inside li { display: flex; align-items: flex-start; gap: 12px; }
.tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9999px; background: #333333; }
.block { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 28px; font-weight: 600; }
.block svg { flex: none; }

.meta { position: absolute; left: 12px; right: 12px; top: 64px; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1.5px dashed rgba(30, 30, 30, 0.35); background: rgba(255, 255, 255, 0.92); color: #1e1e1e; font-family: var(--sf); font-size: 14px; line-height: 20px; animation: qin 0.25s ease-out; }
.meta b { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(30, 30, 30, 0.6); }
.meta button { align-self: flex-start; padding: 8px 14px; border-radius: 9999px; border: 1px solid rgba(30, 30, 30, 0.2); background: #ffffff; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- simplified flat style: overrides the glass rules above ---------- */
.q { background: #f7f8f3; }
.glass { border: 0; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.lens { border: 0; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 2px #1e1e1e, 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.graphite { border: 0; background: #1e1e1e; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.hdr { gap: 0; padding: 16px 12px 0; }
.bar { display: flex; align-items: center; gap: 8px; height: 48px; }
.bar .back, .bar .sp { flex: none; width: 44px; height: 44px; }
.bar .back { display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: #1e1e1e; cursor: pointer; }
.bar .segs { flex: 1 1 0; min-width: 0; display: flex; gap: 6px; }
.bar .seg { height: 4px; background: rgba(30, 30, 30, 0.1); }
.bar .seg i { height: 4px; background: #1e1e1e; }
.bar .word { flex: 1 1 0; min-width: 0; text-align: center; font-weight: 600; }
.sheet { margin-top: 0; border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.orb + .sheet, .hero + .sheet { margin-top: 0; }
.body { padding: 20px 20px 24px; }
.t { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.t.md { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
.t.sm { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.tb { gap: 8px; }
.tb.ten { gap: 10px; }
.s { font-size: 16px; line-height: 22px; color: rgba(30, 30, 30, 0.7); }
.b { color: rgba(30, 30, 30, 0.7); }
.opts { gap: 14px; }
.cap { min-height: 64px; padding: 18px 28px; font-size: 18px; line-height: 24px; font-weight: 500; }
.cap svg { display: none; }
.pics { gap: 14px; }
.pic { border-radius: 24px; }
.pic .photo { height: 210px; border-bottom: 0; }
.pic .photo.img { padding: 0; background: #ecf2db; }
.pic .photo.img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero .photo.img { padding: 0; overflow: hidden; background: #ecf2db; }
.hero .photo.img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .photo.banner.img { padding: 0; }
.hero .photo.banner.img img { object-position: 50% 25%; }
/* S1-I1 quote card: lime quote mark, large text, lime marker on the key words */
.quote { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px 22px 24px; border-radius: 24px; background: #ffffff; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.quote .qmark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: #ebff86; }
.quote blockquote.q-quote { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; text-wrap: balance; }
.quote mark { padding: 0 2px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(180deg, rgba(235, 255, 134, 0) 58%, #ebff86 58%, #ebff86 92%, rgba(235, 255, 134, 0) 92%); }
.pic .lab { min-height: 56px; padding: 16px 20px; font-size: 18px; line-height: 24px; font-weight: 500; }
.pic .lab svg { display: none; }
.photo { background: repeating-linear-gradient(135deg, rgba(30, 30, 30, 0.05) 0px, rgba(30, 30, 30, 0.05) 12px, rgba(30, 30, 30, 0) 12px, rgba(30, 30, 30, 0) 24px), #ecf2db; }
.hero { padding: 16px 20px 0; }
.hero .photo { border: 0; border-radius: 24px; box-shadow: none; }
.hero .photo.banner { height: 176px; }
.proof .t { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.proof .big { display: inline-block; padding: 0 10px; font-size: 64px; line-height: 70px; font-weight: 700; letter-spacing: -0.04em; background: linear-gradient(180deg, rgba(235, 255, 134, 0) 58%, #ebff86 58%, #ebff86 92%, rgba(235, 255, 134, 0) 92%); }
.list { gap: 12px; }
.row { padding: 10px 20px 10px 10px; font-size: 17px; line-height: 22px; font-weight: 600; }
/* S1-05A on the canvas keeps the larger medium labels of the first sample screens */
.list.big .row { font-size: 18px; line-height: 24px; font-weight: 500; }
.disc { background: #ecf2db; box-shadow: none; }
.row[aria-pressed="true"] .disc { background: #ebff86; }
.row[aria-pressed="true"] .box { background: #1e1e1e; }
.q .cta:disabled { border: 0; background: rgba(30, 30, 30, 0.12); color: rgba(30, 30, 30, 0.4); }
.card, .steps, .tl, .feat, .commit, .inside, .block, .plan { border-radius: 24px; }
.card.emph { border: 2px solid #1e1e1e; background: #ffffff; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.steps li + li { border-top-color: rgba(30, 30, 30, 0.06); }
.feat li + li { border-top-color: rgba(30, 30, 30, 0.08); }
.legal { margin: 0; font-size: 14px; line-height: 20px; color: rgba(30, 30, 30, 0.7); text-wrap: pretty; }
.badge { width: 64px; height: 64px; }
.scale button { font-size: 18px; line-height: 24px; font-weight: 500; }
.steps .done .ic, .tick, .tl li:first-child .dot { background: #1e1e1e; }
.tl .dot { border-color: #1e1e1e; }
.plan[aria-pressed="true"] .radio { border-color: #1e1e1e; }
.plan[aria-pressed="true"] .radio::after { background: #1e1e1e; }
.hold button { border-color: #ffffff; background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.hold button::before { background: conic-gradient(#1e1e1e calc(var(--p, 0) * 1turn), transparent 0); }
/* profile: clarity gauge, callout card, answers beside a round photo */
.gauge { display: flex; flex-direction: column; gap: 10px; }
.gauge .pillrow { position: relative; height: 32px; }
.gauge .pill { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 14px; border-radius: 9999px; background: #ebff86; font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.gauge .pill span { font-weight: 500; color: rgba(30, 30, 30, 0.55); }
.segs5 { position: relative; display: flex; align-items: center; gap: 6px; height: 20px; }
.segs5 i { flex: 1 1 0; height: 10px; border-radius: 9999px; }
.segs5 i:nth-child(1) { background: #f2b59f; }
.segs5 i:nth-child(2) { background: #f5dc7d; }
.segs5 i:nth-child(3) { background: #e3f39a; }
.segs5 i:nth-child(4) { background: #a9d18e; }
.segs5 .mk { position: absolute; top: 0; width: 20px; height: 20px; box-sizing: border-box; margin-left: -10px; border-radius: 9999px; border: 3px solid #1e1e1e; background: #ffffff; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.gauge .ends { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.6); }
/* the marker and its pill slide in from the left end to where the answers put them, with a small overshoot */
.segs5 .mk { animation: mkin 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s both; }
.gauge .pill { animation: pillin 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s both; }
@keyframes mkin { from { left: 0%; } }
@keyframes pillin { from { left: 58px; } }
@media (prefers-reduced-motion: reduce) { .segs5 .mk, .gauge .pill { animation: none; } }
.callout { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 24px; background: #ebff86; }
.callout .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: #ffffff; }
.callout h2 { margin: 0 0 4px; font-size: 18px; line-height: 24px; font-weight: 600; }
.callout p { margin: 0; font-size: 15px; line-height: 21px; color: rgba(30, 30, 30, 0.8); text-wrap: pretty; }
.prof { display: grid; grid-template-columns: minmax(0, 1fr) 140px; column-gap: 16px; row-gap: 14px; align-items: start; text-align: left; }
.prof .it { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof .it.side { grid-column: 1; }
.prof .it span { font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.6); }
.prof .it b { font-size: 16px; line-height: 21px; font-weight: 500; text-wrap: pretty; }
.prof .ph { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 140px; height: 140px; box-sizing: border-box; padding: 16px; border-radius: 9999px; background: repeating-linear-gradient(135deg, rgba(30, 30, 30, 0.05) 0px, rgba(30, 30, 30, 0.05) 12px, rgba(30, 30, 30, 0) 12px, rgba(30, 30, 30, 0) 24px), #ecf2db; color: rgba(30, 30, 30, 0.55); text-align: center; }
.prof .ph b { font-size: 12px; line-height: 15px; font-weight: 600; }
.prof .ph small { font-size: 11px; line-height: 14px; }
.prof .ph.img { padding: 0; overflow: hidden; background: #ecf2db; }
.prof .ph.img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.t mark { padding: 0 2px; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(180deg, rgba(235, 255, 134, 0) 58%, #ebff86 58%, #ebff86 92%, rgba(235, 255, 134, 0) 92%); }
.fitchart { position: relative; flex: none; width: 350px; height: 380px; margin: 16px auto 4px; }
.fitchart svg { display: block; overflow: visible; }
.fitchart .line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: fcdraw 1.5s linear 0.1s both; }
.fitchart .area { animation: fcreveal 1.5s linear 0.1s both; }
.fitchart .dot { transform-box: fill-box; transform-origin: center; animation: fcpop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.fitchart .d0 { animation-delay: 0.05s; }
.fitchart .d1 { animation-delay: 0.55s; }
.fitchart .halo, .fitchart .d2 { animation-delay: 1.1s; }
.fitchart .d3 { animation-delay: 1.55s; }
.fitchart .lb { position: absolute; box-sizing: border-box; padding: 6px 10px; border-radius: 12px; font-size: 15px; line-height: 18px; font-weight: 600; color: #1e1e1e; animation: fcin 0.4s ease-out both; }
.fitchart .l0 { left: 16px; bottom: 292px; max-width: 100px; background: #f2b59f; animation-delay: 0.2s; }
.fitchart .l1 { left: 127px; bottom: 232px; max-width: 132px; background: #f5dc7d; animation-delay: 0.7s; }
.fitchart .hl { right: 6px; bottom: 154px; isolation: isolate; width: max-content; padding: 10px 14px; border-radius: 16px; background: #1e1e1e; color: #ffffff; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; transform-origin: 70% 100%; animation: fchl 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1.25s both; }
/* the tail sits under the Week 4 dot: 344 - 105 - 7 = 232 */
.fitchart .hl::after { content: ''; position: absolute; z-index: -1; right: 105px; bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: inherit; transform: rotate(45deg); }
.fitchart .l3 { right: 6px; top: 274px; background: #a9d18e; animation-delay: 1.45s; }
.fitchart .xc { position: absolute; top: 350px; font-size: 13px; line-height: 16px; color: rgba(30, 30, 30, 0.6); }
.fitchart .x0 { left: 2px; }
.fitchart .x1 { left: 121px; transform: translateX(-50%); }
.fitchart .x2 { left: 232px; transform: translateX(-50%); }
@keyframes fcdraw { from { stroke-dashoffset: 1; } }
@keyframes fcreveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fcpop { from { transform: scale(0); } }
@keyframes fcin { from { opacity: 0; transform: translateY(6px); } }
@keyframes fchl { from { opacity: 0; transform: translateY(8px) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .fitchart .line, .fitchart .area, .fitchart .dot, .fitchart .lb { animation: none; } }
.tk-head { text-align: center; }
.ticket { position: relative; flex: none; width: 260px; height: 340px; margin: 4px auto 0; }
.tk-card { position: absolute; inset: 0; border-radius: 28px; background: #ebff86; overflow: hidden; }
.tk-art { position: absolute; left: 0; top: 0; }
.tk-code { position: absolute; left: 14px; right: 14px; top: 244px; height: 82px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 18px; background: #ffffff; }
.tk-code span { font-size: 15px; line-height: 20px; color: rgba(30, 30, 30, 0.7); }
.tk-code b { display: flex; align-items: center; gap: 6px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: 0.02em; }
.tk-scratch { position: absolute; left: 0; top: 0; width: 260px; height: 340px; border-radius: 28px; touch-action: none; cursor: pointer; transition: opacity 0.5s ease, filter 0.5s ease; }
.tk-scratch:focus-visible { outline: 3px solid #1e1e1e; outline-offset: 4px; }
.tk-hint { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.25s ease; }
.tk-hint svg { position: absolute; left: 0; top: 0; }
.tk-title { position: absolute; left: 0; right: 0; top: 28px; text-align: center; color: #ffffff; font-size: 22px; line-height: 28px; font-weight: 600; }
.tk-sq { stroke-dasharray: 1; stroke-dashoffset: 0; animation: tksq 3.2s ease-in-out infinite; }
/* the hand walks the scribble; its fingertip is the anchor */
.tk-hint .tk-hand { offset-path: path('M62 168L150 98L96 140L192 112L116 176L204 148'); offset-anchor: 25.1px 4.7px; offset-rotate: 0deg; offset-distance: 100%; animation: tkhand 3.2s ease-in-out infinite; }
.ticket.touched .tk-hint, .ticket.open .tk-hint { opacity: 0; }
.ticket.open .tk-scratch { opacity: 0; filter: blur(8px); pointer-events: none; }
.tk-notch { position: absolute; z-index: 3; top: 220px; width: 20px; height: 20px; border-radius: 50%; background: #f7f8f3; }
.tk-notch.l { left: -10px; }
.tk-notch.r { right: -10px; }
.ticket.open .tk-badge { transform-box: fill-box; transform-origin: center; animation: tkpop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.2s both; }
.ticket.open .tk-code { animation: tkup 0.45s ease-out 0.35s both; }
@keyframes tksq { 0%, 12% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes tkhand { 0%, 12% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }
@keyframes tkpop { from { opacity: 0; transform: scale(0.4); } }
@keyframes tkup { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tk-sq, .tk-hint .tk-hand, .ticket.open .tk-badge, .ticket.open .tk-code { animation: none; } .tk-scratch { transition: none; } }
/* loader: one bar per step fills in bursts, reviews slide by underneath */
.bars { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.bars .brow { color: rgba(30, 30, 30, 0.5); transition: color 0.3s ease; }
.bars .brow.now, .bars .brow.done { color: #1e1e1e; }
.bars .top { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 22px; }
.bars .lbl { flex: 1 1 0; min-width: 0; text-wrap: pretty; }
.bars .pct { flex: none; min-width: 42px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars .spin { flex: none; width: 16px; height: 16px; margin-top: 3px; box-sizing: border-box; border-radius: 9999px; border: 2px solid rgba(30, 30, 30, 0.15); border-top-color: #1e1e1e; animation: spin 0.9s linear infinite; visibility: hidden; }
.bars .brow.now .spin { visibility: visible; }
.bars .fill { height: 8px; margin-top: 8px; border-radius: 9999px; background: #ecf2db; overflow: hidden; }
.bars .fill i { display: block; width: 0; height: 100%; border-radius: 9999px; background: #1e1e1e; transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.trust { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; text-align: center; }
.trust h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.trust .rate { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.6); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { display: block; }
.revs { flex: none; margin: -8px -20px 0; padding: 4px 20px 16px; overflow: hidden; }
.revs .track { display: flex; gap: 12px; width: max-content; animation: revs 16s infinite; }
.rev { flex: none; width: 280px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 24px; background: #ffffff; box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 6px 20px rgba(30, 30, 30, 0.06); }
.rev .rh, .rev .rs { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev .rh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 22px; font-weight: 600; }
.rev .rh span, .rev .rs span { flex: none; font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.6); }
.rev .rt { font-size: 16px; line-height: 22px; font-weight: 600; text-wrap: pretty; }
.rev .rm { font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.6); }
.rev p { margin: 0; font-size: 15px; line-height: 21px; color: rgba(30, 30, 30, 0.75); text-wrap: pretty; }
@keyframes revs {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-292px); }
  50%, 70% { transform: translateX(-584px); }
  75%, 95% { transform: translateX(-876px); }
  100% { transform: translateX(-1168px); }
}
@media (prefers-reduced-motion: reduce) { .bars .fill i { transition: none; } .revs .track { animation: none; } }

/* ---------- per-screen values from the canvas */
.body.g20 { gap: 20px; }
.body.g28 { gap: 28px; }
.body.g40 { gap: 40px; }
/* the first sample screens of the simple style keep 10px between headline and subtitle */
.q[data-screen="S1-01"] .tb, .q[data-screen="S1-02"] .tb, .q[data-screen="S4-05"] .tb, .q[data-screen="S1-I1"] .tb.loose { gap: 10px; }
.t.bal { text-wrap: balance; }
.t.nowrap-pretty { text-wrap: wrap; }
.hero .photo.proofpic { height: 290px; border-radius: 28px; }
/* S3-04 on the canvas: options 10px apart, the picked one in the older compact style with an arrow */
.q[data-screen="S3-04"] .opts { gap: 10px; }
.q[data-screen="S3-04"] .cap[aria-pressed="true"] { min-height: 60px; padding: 12px 20px 12px 24px; font-size: 17px; line-height: 22px; font-weight: 600; }
.q[data-screen="S3-04"] .cap[aria-pressed="true"] svg { display: block; stroke: #1e1e1e; }

/* ---------- logic panel ---------- */
.panel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); max-height: 844px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); scrollbar-width: thin; }
.panel h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
.panel h3 { margin: 0 0 8px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.panel section { display: flex; flex-direction: column; }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pbtn { padding: 7px 12px; border-radius: 9999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pbtn:hover { border-color: var(--muted); }
.pbtn:focus-visible, .panel select:focus-visible, .panel input:focus-visible, .path button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.now-id { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.now-t { font-size: 17px; line-height: 22px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 12.5px; line-height: 18px; background: var(--panel-2); border: 1px solid var(--line); }
.chip.today { color: var(--today); background: var(--today-bg); border-color: transparent; }
.chip.soon { color: var(--soon); background: var(--soon-bg); border-color: transparent; }
.chip.calm { color: var(--calm); background: var(--calm-bg); border-color: transparent; }
.chip.info { color: var(--info); background: var(--info-bg); border-color: transparent; }
.chip code, .rules code, .events code, .path code { font-family: var(--mono); font-size: 12px; }
.empty { color: var(--muted); font-size: 13px; }
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; line-height: 19px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.path button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.path .seen button { color: var(--ink); background: var(--panel-2); }
.path .cur button { color: var(--panel); background: var(--ink); border-color: var(--ink); }
.path .rf button { border-color: var(--today); }
.rules, .events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 19px; }
.rules li, .events li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); }
.rules code, .events code { color: var(--muted); }
.toggles { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.toggles label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggles input { width: 16px; height: 16px; accent-color: var(--ink); }
.panel select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 13px; }
.hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 18px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 430px); padding-block: 16px 32px; }
  .device { width: 100%; height: min(844px, calc(100dvh - 32px)); border-radius: 32px; }
  .panel { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-in, .foot.appear, .meta { animation: none; }
  .seg i { transition: none; }
  .steps .now .ic { animation-duration: 2.4s; }
}

/* ---------- S2-G1 chart and S2-T1 */
@keyframes s2g-gguide{0%,4%{stroke-dashoffset:1;opacity:1}16%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes s2g-gdot{0%,14%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}20%,92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes s2g-glabel{0%,18%{opacity:0;transform:translate(-50%,6px) scale(.9);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}24%,92%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,0) scale(1)}}
@keyframes s2g-guide{0%,30%{stroke-dashoffset:1;opacity:1}42%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes s2g-dot{0%,40%{transform:scale(0);opacity:1;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}46%,92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes s2g-label{0%,48%{opacity:0;transform:translate(-50%,8px) scale(.9);animation-timing-function:cubic-bezier(.3,1.4,.5,1)}54%,92%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,0) scale(1)}}
@keyframes s2g-rings{0%,44%{opacity:0}54%,92%{opacity:1}100%{opacity:0}}
@keyframes s2g-pulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){[style*="s2g-"]{animation:none!important}}
.q .fitmid { display: flex; justify-content: center; }
.q .trust-badge { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 600; }
.q .trust-photo { position: relative; flex: none; height: 300px; margin: 0 -20px; }
.q .trust-photo img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 31%; }
.q .trust-photo .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, rgba(247, 248, 243, 0) 0%, #f7f8f3 100%); }
.q .trust-names { margin: -8px 0 0; font-size: 14px; line-height: 20px; color: rgba(30, 30, 30, 0.7); text-align: center; text-wrap: balance; }
.q .trust-names strong { font-weight: 600; color: #1e1e1e; white-space: nowrap; }
.q .trust-fine { margin: 0; font-size: 13px; line-height: 18px; color: rgba(30, 30, 30, 0.7); text-align: center; }

/* ---------- production: the quiz fills the screen, no review panel */
html, body { height: 100%; }
body { padding: 0; background: #f7f8f3; }
.app, .app[class] { display: block; padding: 0; }
.device { width: 100%; max-width: 430px; height: 100vh; height: 100dvh; margin: 0 auto; border-radius: 0; box-shadow: none; }
.panel { display: none; }
/* S2-T1 goes without the generated photo here: its text block sits in the middle of the screen */
.q .body > .trust-badge:first-child { margin-top: auto; }
.q .body > .trust-badge:first-child ~ .tb:last-child { margin-bottom: auto; }
/* the end of a stage: the funnel opens the next one, the screen takes no more taps meanwhile */
.abt-wait #q { pointer-events: none; }
.abt-wait #q .cta { opacity: 0.6; transition: opacity 0.2s 0.3s; }