:root{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,sans-serif;color:#172033;background:#f4f6f8;font-synthesis:none;letter-spacing:0;--panel: #ffffff;--surface: #eef1f4;--border: #dfe4ea;--muted: #657184;--strong: #111827}:root[data-theme=dark]{color:#f4f7fb;background:#181a1f;--panel: #22252b;--surface: #191c21;--border: #383d46;--muted: #a8b0bd;--strong: #ffffff}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;height:100%;min-height:0;margin:0}button,input,select{font:inherit;letter-spacing:0}button{cursor:pointer}.app{width:100%;height:100%;min-height:420px;display:flex;overflow:hidden;background:var(--surface)}.app.display-mode{min-height:0}.preview-area{flex:1;min-width:0;min-height:0;padding:clamp(14px,2vw,28px);display:grid;place-items:center}.display-mode .preview-area{padding:clamp(10px,2.5vw,32px)}.funnel-shell{width:min(100%,980px);height:min(100%,720px);min-height:380px;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px #14203214}.funnel-header{min-height:92px;padding:20px 26px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border)}.funnel-header>div:first-child{min-width:0}.eyebrow{max-width:100%;margin:0 0 5px;overflow:hidden;color:#7a8493;font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.funnel-header h1{margin:0;overflow:hidden;color:var(--strong);font-size:clamp(22px,3vh,30px);line-height:1.1;font-weight:750;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.scope{text-align:right;min-width:90px}.scope strong,.scope span{display:block}.scope strong{max-width:130px;overflow:hidden;color:var(--strong);font-size:14px;text-overflow:ellipsis;white-space:nowrap}.scope span{margin-top:4px;color:var(--muted);font-size:12px}.member-legend{flex:0 0 30px;min-width:0;padding:7px 26px 4px;display:flex;align-items:center;justify-content:safe center;gap:14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.member-legend::-webkit-scrollbar{display:none}.member-legend-item{min-width:0;padding:2px 0;display:inline-flex;align-items:center;gap:5px;color:var(--muted);background:transparent;border:0;font-size:10px;white-space:nowrap;transition:opacity .18s ease,color .18s ease}.member-legend-item i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 7%,transparent)}.member-legend-item.is-muted{opacity:.35}.member-legend-item.is-active{color:var(--strong);font-weight:700}.member-legend-item:focus-visible{outline:2px solid #4f7fdc;outline-offset:2px}.funnel-chart{flex:1;min-height:0;position:relative;padding:clamp(12px,2.2vh,22px) clamp(18px,3vw,34px);display:grid;grid-template-rows:repeat(5,minmax(52px,1fr));gap:clamp(3px,.7vh,7px)}.chart-state{grid-row:1 / -1;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);text-align:center}.chart-state strong{color:var(--strong);font-size:15px}.chart-state span{max-width:360px;font-size:12px;line-height:1.5}.chart-state.is-error strong{color:#c2413d}.loading-spinner{width:22px;height:22px;margin-bottom:3px;border:2px solid var(--border);border-top-color:#2563eb;border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage-row{min-height:0;display:grid;grid-template-columns:minmax(260px,1fr) minmax(118px,25%);align-items:stretch;gap:clamp(12px,2vw,24px)}.stage-main{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.stage-shape{width:var(--stage-width);flex:1 1 auto;min-height:34px;position:relative;color:#fff;transition:width .25s ease}.stage-clip{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;background:var(--stage-color);clip-path:polygon(3.5% 0,96.5% 0,92.5% 100%,7.5% 100%)}.stage-clip:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 45%,rgba(0,0,0,.08));pointer-events:none}.stage-segments{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;animation:reveal-segments .72s cubic-bezier(.22,.78,.25,1) both;animation-delay:var(--stage-delay)}.stage-segment{height:100%;flex:0 0 auto;transition:opacity .2s ease,filter .2s ease}.stage-segment.is-muted{opacity:.22;filter:saturate(.45)}.stage-segment.is-active{filter:brightness(1.08) saturate(1.12)}.stage-copy{position:relative;z-index:2;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:7px;white-space:nowrap;text-shadow:0 1px 2px rgba(10,20,35,.24);pointer-events:none}.stage-copy span{font-size:clamp(11px,1.7vh,14px);font-weight:650}.stage-copy strong{font-size:clamp(22px,4.2vh,36px);line-height:1;font-variant-numeric:tabular-nums}.stage-copy small{font-size:11px;opacity:.84}.segment-hitboxes{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex}.segment-hitbox{height:100%;padding:0;flex:0 0 auto;position:relative;color:inherit;background:transparent;border:0;outline:none;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}.segment-hitbox:hover,.segment-hitbox:focus-visible{z-index:5;background:#ffffff24;box-shadow:inset 0 0 0 2px #ffffffad}.segment-tooltip{min-width:116px;max-width:170px;position:absolute;left:50%;bottom:calc(100% + 8px);z-index:12;padding:8px 10px;display:grid;gap:3px;color:var(--strong);background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 22px #1420322e;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none;white-space:nowrap}.segment-tooltip:after{content:"";width:7px;height:7px;position:absolute;left:50%;bottom:-5px;background:var(--panel);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:translate(-50%) rotate(45deg)}.segment-tooltip b{overflow:hidden;text-overflow:ellipsis;font-size:11px}.segment-tooltip span{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.segment-hitbox:hover .segment-tooltip,.segment-hitbox:focus-visible .segment-tooltip{opacity:1;visibility:visible;transform:translate(-50%)}.segment-hitbox:first-child .segment-tooltip{left:max(50%,62px)}.segment-hitbox:last-child .segment-tooltip{left:min(50%,calc(100% - 62px))}@keyframes reveal-segments{0%{clip-path:inset(0 100% 0 0);filter:saturate(.7)}to{clip-path:inset(0 0 0 0);filter:saturate(1)}}.rate{min-width:0;padding:9px 0;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--border)}.rate span{color:var(--muted);font-size:clamp(10px,1.4vh,12px);line-height:1.3}.rate strong{margin-top:3px;color:var(--strong);font-size:clamp(19px,3.3vh,29px);line-height:1;font-variant-numeric:tabular-nums}.rate-goal strong{color:#2563eb}.config-panel{width:340px;flex:0 0 340px;min-height:0;position:relative;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column}.config-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 18px 88px}.config-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.config-title h2{margin:0;color:var(--strong);font-size:20px}.icon-button{width:32px;height:32px;padding:0;display:grid;place-items:center;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:6px}.icon-button:hover{color:#2563eb;border-color:#98b8ef}fieldset{min-width:0;margin:0;padding:17px 0 19px;border:0;border-top:1px solid var(--border)}legend{padding:0 0 12px;color:var(--strong);font-size:13px;font-weight:700}label{display:block;margin:11px 0 6px;color:var(--muted);font-size:12px}.select-wrap{height:34px;position:relative}.select-wrap select{width:100%;height:100%;padding:0 31px 0 10px;color:var(--strong);background:var(--panel);border:1px solid var(--border);border-radius:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.select-wrap select:focus,input:focus{border-color:#4f7fdc;box-shadow:0 0 0 2px #2563eb1a}.text-input{width:100%;height:34px;padding:0 10px;color:var(--strong);background:var(--panel);border:1px solid var(--border);border-radius:6px;outline:none}.field-note{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.goal-formula{margin-top:10px;padding:9px 1px 0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}.goal-formula span{min-width:0;color:var(--muted);font-size:11px}.goal-formula strong{flex:0 0 auto;color:#1f5fca;font-size:14px}.select-wrap svg{position:absolute;right:9px;top:10px;color:var(--muted);pointer-events:none}.segmented{width:100%;height:34px;display:grid;grid-template-columns:repeat(3,1fr);padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:6px}.segmented.two{grid-template-columns:repeat(2,1fr)}.segmented.period-segmented{grid-template-columns:repeat(5,1fr)}.segmented.period-segmented button{padding:0 2px;font-size:11px}.segmented button{min-width:0;padding:0 6px;color:var(--muted);background:transparent;border:0;border-radius:4px;font-size:12px}.segmented button.active{color:#1f5fca;background:var(--panel);box-shadow:0 1px 3px #1420321f;font-weight:650}.number-field{height:36px;margin-top:11px;padding:0 0 0 10px;display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden}.number-field span{margin-right:auto;color:var(--muted);font-size:12px}.number-field input{width:102px;align-self:stretch;padding:0 9px;color:var(--strong);text-align:right;background:var(--panel);border:0;border-left:1px solid var(--border);outline:0}input[aria-invalid=true]{color:#c2413d;border-color:#d95c57!important;box-shadow:0 0 0 2px #c2413d1a}.threshold-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.threshold-grid .number-field{height:auto;padding:0;display:block;overflow:visible;border:0}.threshold-grid .number-field span{display:block;margin:0 0 6px}.threshold-grid .number-field input{width:100%;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:6px}.config-actions{position:absolute;left:0;right:0;bottom:0;min-height:70px;padding:14px 18px;display:flex;align-items:center;gap:10px;background:var(--panel);border-top:1px solid var(--border)}.save-message{flex:1;min-width:0;color:var(--muted);font-size:11px}.save-message.is-error{color:#c2413d}.primary-button{height:36px;min-width:112px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff;background:#2563eb;border:0;border-radius:6px;font-size:13px;font-weight:650}.primary-button:hover{background:#1d4ed8}.primary-button:disabled{opacity:.5;cursor:default}@media (max-width: 760px){.app.config-mode{overflow-y:auto;display:block}.config-mode .preview-area{height:520px;padding:10px}.config-panel{width:100%;min-height:620px;border-left:0;border-top:1px solid var(--border)}.config-actions{position:sticky}.funnel-header{min-height:76px;padding:14px 16px 12px}.funnel-header h1{font-size:21px}.funnel-chart{padding:10px 12px}.stage-row{grid-template-columns:minmax(205px,1fr) minmax(88px,30%);gap:9px}.stage-copy{gap:4px}.stage-copy span{font-size:10px}.stage-copy strong{font-size:21px}.rate strong{font-size:18px}.member-legend{justify-content:flex-start;padding-inline:16px}.segment-tooltip{min-width:106px;padding:7px 8px}}@media (max-width: 430px){.preview-area{padding:6px}.funnel-shell{min-height:390px}.funnel-header{align-items:center}.scope{min-width:72px}.stage-row{grid-template-columns:minmax(180px,1fr) 82px;gap:6px}.stage-copy span,.rate span{font-size:9px}.member-legend{flex-basis:28px;padding-block:6px 3px;gap:11px}.member-legend-item{font-size:9px}.segment-tooltip{bottom:calc(100% + 5px)}}@media (max-height: 500px){.display-mode .preview-area{padding:6px}.display-mode .funnel-shell{min-height:0}.display-mode .funnel-header{min-height:56px;padding:9px 15px 8px}.display-mode .funnel-header h1{font-size:18px}.display-mode .eyebrow{margin-bottom:2px;font-size:8px}.display-mode .scope strong{font-size:12px}.display-mode .scope span{margin-top:2px;font-size:10px}.display-mode .member-legend{flex-basis:24px;padding-block:4px 2px}.display-mode .member-legend-item{font-size:8px}.display-mode .funnel-chart{padding:6px 12px;grid-template-rows:repeat(5,minmax(34px,1fr));gap:2px}.display-mode .stage-copy{gap:4px}.display-mode .stage-copy span{font-size:9px}.display-mode .stage-copy strong{font-size:19px}.display-mode .stage-copy small{font-size:8px}.display-mode .rate{padding-block:3px}.display-mode .rate span{font-size:8px}.display-mode .rate strong{font-size:17px}}@media (prefers-reduced-motion: reduce){.stage-segments,.loading-spinner{animation:none}.stage-shape,.segment-hitbox,.segment-tooltip{transition:none}}