.flow-page{color-scheme:light;--ai-bg: oklch(.985 .002 55);--ai-raised: oklch(1 0 0);--ai-ink: oklch(.185 .005 50);--ai-muted: oklch(.44 .008 50);--ai-line: oklch(.64 .008 50);--ai-primary: oklch(.585 .19 24);--ai-primary-ink: oklch(1 0 0);--ai-danger: oklch(.48 .18 24);--flow-night: oklch(.145 .003 50);--flow-night-ink: oklch(.95 .003 50);--flow-night-muted: oklch(.66 .006 50);--flow-night-line: oklch(.28 .004 50);--flow-ok: oklch(.72 .14 155);--flow-glow: oklch(.44 .005 50 / 35%);--flow-pixel: oklch(.78 .004 50 / 42%);--flow-measure: 22rem;--flow-control: 3rem;--flow-heading: clamp(1.75rem, 2.6vw, 2.25rem);background:var(--ai-bg);color:var(--ai-ink)}.flow-layout{display:grid;grid-template-columns:1fr 1.2fr;min-height:100dvh}.flow-rail{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:max(2.5rem,env(safe-area-inset-top)) var(--pw-space-xxl) max(2.5rem,env(safe-area-inset-bottom));background:radial-gradient(ellipse 85% 55% at 45% -12%,var(--flow-glow),transparent 85%),var(--flow-night);color:var(--flow-night-ink)}.flow-rail:after{content:"";position:absolute;inset:55% 0 0;background:var(--flow-pixel);mask-image:repeating-linear-gradient(90deg,transparent 0 5px,black 5px 7px,transparent 7px 10px),repeating-linear-gradient(0deg,transparent 0 5px,black 5px 7px,transparent 7px 10px),linear-gradient(180deg,transparent,black 53%,transparent 97%);mask-composite:intersect;pointer-events:none}.flow-rail>*{position:relative;z-index:1}.flow-brand{display:flex;align-items:center;gap:var(--pw-space-sm);font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em}.flow-mark{color:var(--ai-primary)}.flow-rail-heading{margin-top:var(--pw-space-xxl);font-size:var(--flow-heading);font-weight:500;line-height:1.12;letter-spacing:-.04em;overflow-wrap:anywhere}.flow-rail-lead{margin-top:var(--pw-space-md);color:var(--flow-night-muted);font-size:var(--text-sm);line-height:1.5;max-width:34ch}.flow-rail-context{margin-top:var(--pw-space-xl);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6;color:var(--flow-night-muted)}.flow-rail-context b{color:var(--flow-night-ink);font-weight:500}.flow-steps,.flow-points{list-style:none;margin:var(--pw-space-xl) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--pw-space-md)}.flow-step{display:grid;grid-template-columns:1.25rem 1fr;gap:var(--pw-space-sm);align-items:start;color:var(--flow-night-muted);font-size:var(--text-sm)}.flow-step[data-state=current],.flow-step[data-state=done]{color:var(--flow-night-ink)}.flow-step small,.flow-points small{display:block;margin-top:.125rem;font-size:var(--text-xs);line-height:1.45;color:var(--flow-night-muted)}.flow-step-marker{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:999px;border:1px solid var(--flow-night-line);font-family:var(--font-mono);font-size:.625rem}.flow-step[data-state=current] .flow-step-marker{background:var(--ai-primary);border-color:var(--ai-primary);color:var(--ai-primary-ink)}.flow-step[data-state=done] .flow-step-marker{border-color:var(--flow-ok);color:var(--flow-ok)}.flow-points li{color:var(--flow-night-ink);font-size:var(--text-sm);font-weight:500}.flow-points small{font-weight:400;max-width:36ch}.flow-rail-footer{margin-top:auto;padding-top:var(--pw-space-xl);font-size:var(--text-xs);line-height:1.6;color:var(--flow-night-muted)}.flow-rail-footer a,.flow-rail-footer button{color:var(--flow-night-ink);text-decoration:underline;text-underline-offset:2px}.flow-strip{display:none;flex-direction:column;gap:var(--pw-space-sm);padding:max(1rem,env(safe-area-inset-top)) var(--pw-space-xl) var(--pw-space-md);background:var(--flow-night);color:var(--flow-night-ink)}.flow-strip-marks{display:flex;gap:var(--pw-space-xs)}.flow-strip-marks i{display:block;width:1.25rem;height:3px;border-radius:2px;background:var(--flow-night-line)}.flow-strip-marks i[data-state=current]{background:var(--ai-primary)}.flow-strip-marks i[data-state=done]{background:var(--flow-ok)}.flow-strip-label{font-size:var(--text-xs);color:var(--flow-night-muted)}.flow-panel{display:flex;align-items:center;justify-content:center;min-width:0;padding:max(3rem,env(safe-area-inset-top)) var(--pw-space-xxl) max(3rem,env(safe-area-inset-bottom))}.flow-content{width:100%;max-width:var(--flow-measure)}.flow-heading{font-size:var(--flow-heading);font-weight:500;line-height:1.12;letter-spacing:-.04em}.flow-lead{margin-top:var(--pw-space-sm);margin-bottom:var(--pw-space-xl);color:var(--ai-muted);font-size:var(--text-sm);line-height:1.5}.flow-form{display:grid;gap:var(--pw-space-lg)}.flow-form .field{min-height:var(--flow-control);font-size:var(--text-base);caret-color:var(--ai-primary)}.flow-form .field:hover{border-color:var(--ai-muted)}.flow-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--pw-space-sm);margin-top:var(--pw-space-xl)}.flow-primary{height:var(--flow-control);padding-inline:var(--pw-space-xl);background:var(--ai-primary);color:var(--ai-primary-ink)}.flow-primary:hover:not(:disabled){background:oklch(from var(--ai-primary) calc(l - .04) c h)}.flow-primary:focus-visible{outline:2px solid var(--ai-primary);outline-offset:3px}.flow-primary-wide{width:100%}.flow-error{color:var(--ai-danger);font-size:var(--text-sm);line-height:1.5}.flow-note{margin-top:var(--pw-space-xl);color:var(--ai-muted);font-size:var(--text-xs);line-height:1.75}.flow-verdict{border-radius:.5rem;border:1px solid var(--ai-line);padding:var(--pw-space-lg)}.flow-verdict[data-tone=bad]{border-color:oklch(from var(--ai-danger) l c h / 40%);background:oklch(from var(--ai-danger) l c h / 8%)}.flow-verdict[data-tone=warn]{border-color:#dfa11a73;background:#dfa11a1a}.flow-verdict[data-tone=good]{border-color:oklch(from var(--flow-ok) l c h / 45%);background:oklch(from var(--flow-ok) l c h / 10%)}.flow-verdict[data-tone=muted]{border-color:var(--ai-line);background:var(--ai-raised)}@media(max-width:767px){.flow-layout{display:block}.flow-rail{display:none}.flow-strip{display:flex}.flow-panel{align-items:flex-start;padding:var(--pw-space-xxl) max(var(--pw-space-xl),env(safe-area-inset-right)) max(var(--pw-space-xxl),env(safe-area-inset-bottom)) max(var(--pw-space-xl),env(safe-area-inset-left))}.flow-heading,.flow-rail-heading{font-size:1.75rem}}
