html{overflow-x:clip}.select-flow-page{background:var(--color-white,#fff);overflow-x:clip}.select-flow-page [hidden]{display:none!important}.select-flow-page button{cursor:pointer}.select-flow-page button:disabled{cursor:not-allowed}.flow-breadcrumb{border-bottom:1px solid var(--color-border,#e2e8f0);background:#f8fafc}.flow-breadcrumb ol{color:var(--color-text-muted,#64748b);flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:.75rem 0;font-size:.76rem;list-style:none;display:flex}.flow-breadcrumb li{align-items:center;gap:.45rem;display:flex}.flow-breadcrumb li:not(:last-child):after{color:#cbd5e1;content:"/"}.flow-breadcrumb a{text-decoration:none}.flow-breadcrumb a:hover{color:var(--color-dark,#0f172a);text-underline-offset:.2rem;text-decoration:underline}.flow-hero{background:radial-gradient(circle at 92% 8%,#0ea5e92b,#0000 28rem),radial-gradient(circle at 4% 85%,#16a34a1f,#0000 25rem),linear-gradient(#fff,#f8fafc);padding-block:3.5rem 4rem;position:relative;overflow:hidden}.flow-hero:after{content:"";pointer-events:none;border:1px solid #0ea5e924;border-radius:50%;width:24rem;height:24rem;position:absolute;bottom:-10rem;right:-8rem}.flow-hero-grid{z-index:1;gap:2.5rem;display:grid;position:relative}.flow-hero-copy{max-width:780px}.flow-hero h1{color:var(--color-dark,#0f172a);letter-spacing:-.045em;margin:0;font-size:clamp(2rem,6vw,3.8rem);line-height:1.15}.flow-hero h1 span{color:#0000;background:linear-gradient(110deg, var(--color-primary-hover,#15803d), #0284c7);-webkit-background-clip:text;background-clip:text}.flow-hero-lead{color:#475569;max-width:730px;margin:1.4rem 0 0;font-size:clamp(1rem,2.4vw,1.14rem)}.flow-hero-lead strong{color:var(--color-dark,#0f172a)}.flow-hero-actions{flex-direction:column;gap:.75rem;margin-top:1.8rem;display:flex}.flow-hero-actions .button{width:100%}.flow-hero-points{color:var(--color-text-muted,#64748b);flex-wrap:wrap;gap:.55rem 1rem;margin:1.35rem 0 0;padding:0;font-size:.82rem;font-weight:700;list-style:none;display:flex}.flow-hero-points li:before{color:var(--color-primary,#16a34a);content:"✓";margin-right:.35rem;font-weight:900}.hero-flow-card{color:#e2e8f0;background:radial-gradient(circle at 100% 0%, #22c55e2e, transparent 18rem), var(--color-dark,#0f172a);border-radius:var(--radius-lg,2rem);border:1px solid #334155;align-self:center;padding:1.25rem;overflow:hidden;box-shadow:0 28px 70px #0f172a2e}.hero-flow-card>p{color:#86efac;letter-spacing:.14em;margin:0 0 .8rem;font-size:.7rem;font-weight:850}.hero-flow-card ol{gap:0;margin:0;padding:0;list-style:none;display:grid}.hero-flow-card li{border-bottom:1px solid #334155;grid-template-columns:2rem 1fr auto;align-items:center;gap:.75rem;min-height:3.3rem;padding:.65rem 0;display:grid;position:relative}.hero-flow-card li:last-child{border-bottom:0}.hero-flow-card li>span{color:#bbf7d0;background:#16a34a33;border-radius:50%;place-items:center;width:2rem;height:2rem;font-size:.68rem;font-weight:850;display:grid}.hero-flow-card strong{color:#fff;font-size:.88rem}.hero-flow-card small{color:#94a3b8;font-size:.72rem;font-weight:700}.logic-notice{background:#eff6ff;border-block:1px solid #bfdbfe}.logic-notice-inner{align-items:flex-start;gap:.8rem;padding-block:1rem;display:flex}.logic-notice-icon{color:#0369a1;background:#dbeafe;border-radius:50%;flex:none;place-items:center;width:1.7rem;height:1.7rem;margin-top:.12rem;font-family:Georgia,serif;font-weight:900;display:grid}.logic-notice p{color:#334155;margin:0;font-size:.86rem}.visualizer-section{background:radial-gradient(circle at 100% 0,#0ea5e90f,#0000 30rem),#fff;position:relative}.visualizer-intro{margin-bottom:2.25rem}.learning-experience{gap:2rem;display:grid}.visualizer{border:1px solid var(--color-border,#e2e8f0);min-width:0;box-shadow:var(--shadow-md,0 12px 36px #0f172a17);background:#f8fafc;border-radius:1.6rem;padding:.85rem}.visualizer-topbar{justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .35rem .85rem;display:flex}.visualizer-label,.visualizer-status{margin:0}.visualizer-label{color:var(--color-primary,#16a34a);letter-spacing:.12em;font-size:.65rem;font-weight:850}.visualizer-status{color:var(--color-dark,#0f172a);margin-top:.1rem;font-size:.85rem;font-weight:850}.reset-button,.flow-control,.step-tab{border:0;font-weight:800}.reset-button{color:#475569;border:1px solid var(--color-border,#e2e8f0);background:#fff;border-radius:.7rem;min-height:2.5rem;padding:.55rem .8rem;font-size:.75rem}.reset-button:hover{color:var(--color-dark,#0f172a);border-color:#94a3b8}.step-tabs{scrollbar-width:thin;gap:.5rem;padding:0 .1rem .75rem;display:flex;overflow-x:auto}.step-tab{color:#64748b;border:1px solid var(--color-border,#e2e8f0);background:#fff;border-radius:999px;flex:none;align-items:center;gap:.38rem;min-height:2.7rem;padding:.42rem .7rem;font-size:.66rem;transition:color .18s,background-color .18s,border-color .18s;display:inline-flex}.step-tab>span{color:#475569;background:#f1f5f9;border-radius:50%;place-items:center;width:1.45rem;height:1.45rem;font-size:.64rem;display:grid}.step-tab.is-active{color:#166534;background:var(--color-primary-soft,#dcfce7);border-color:#86efac}.step-tab.is-active>span{color:#fff;background:var(--color-primary,#16a34a)}.visualizer-workspace{gap:.75rem;display:grid}.query-panel,.stage-panel{border-radius:1rem;min-width:0;overflow:hidden}.query-panel{color:#cbd5e1;background:var(--color-dark,#0f172a);border:1px solid #334155}.panel-heading{background:#172033;border-bottom:1px solid #334155;align-items:center;gap:.35rem;min-height:2.6rem;padding-inline:.85rem;display:flex}.panel-heading>span{background:#475569;border-radius:50%;width:.55rem;height:.55rem}.panel-heading>span:first-child{background:#fb7185}.panel-heading>span:nth-child(2){background:#fbbf24}.panel-heading>span:nth-child(3){background:#4ade80}.panel-heading strong{color:#94a3b8;margin-left:.3rem;font-size:.68rem}.query-panel pre{margin:0;padding:1rem;font-size:.69rem;line-height:1.72;transition:opacity .16s;overflow-x:auto}.visualizer.is-copy-changing .query-panel pre{opacity:.38}.query-panel code>span{opacity:.46;border-left:3px solid #0000;border-radius:.35rem;margin:.08rem -.35rem;padding:.1rem .35rem;transition:color .22s,background-color .22s,border-color .22s,opacity .22s;display:block}.query-panel code>span.is-current{color:#dcfce7;opacity:1;background:#16a34a30;border-left-color:#4ade80}.query-note{color:#94a3b8;margin:0;padding:0 1rem .9rem;font-size:.66rem}.stage-panel{border:1px solid var(--color-border,#e2e8f0);background:#fff;padding:1rem}.stage-heading{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.stage-heading p,.stage-heading h3{margin:0}.stage-heading p{color:var(--color-primary,#16a34a);letter-spacing:.12em;font-size:.65rem;font-weight:850}.stage-heading h3{color:var(--color-dark,#0f172a);margin-top:.15rem;font-size:clamp(1.05rem,3vw,1.4rem);line-height:1.35}.shape-badge{color:#475569;white-space:nowrap;background:#f1f5f9;border-radius:999px;flex:none;padding:.34rem .55rem;font-family:SFMono-Regular,Consolas,monospace;font-size:.62rem;font-weight:750}.stage-description{color:var(--color-text-muted,#64748b);border-bottom:1px solid var(--color-border,#e2e8f0);margin:.75rem 0 0;padding-bottom:.85rem;font-size:.78rem;line-height:1.65}.stage-header,.stage-description{transition:opacity .15s,transform .18s}.visualizer.is-copy-changing .stage-header,.visualizer.is-copy-changing .stage-description{opacity:0;transform:translateY(-.18rem)}.data-stage{min-height:24rem;padding-block:1rem .7rem}.source-tables{align-items:center;gap:.65rem;transition:max-height .42s,opacity .28s,transform .42s cubic-bezier(.2,.75,.25,1);display:grid}.visualizer[data-step="0"] .source-tables{margin-top:.75rem}.visualizer[data-step]:not([data-step="0"]) .source-tables{opacity:0;max-height:0;overflow:hidden;transform:scale(.97)translateY(-.5rem)}.data-card,.working-result{border:1px solid var(--color-border,#e2e8f0);background:#fff;border-radius:.8rem;min-width:0;overflow:hidden}.data-card-title{color:#334155;border-bottom:1px solid var(--color-border,#e2e8f0);background:#f8fafc;justify-content:space-between;align-items:center;gap:.75rem;min-height:2.25rem;padding:.55rem .7rem;font-size:.68rem;display:flex}.data-card-title span{color:#64748b;font-size:.62rem;font-weight:700}.join-mark{color:#64748b;background:#f1f5f9;border-radius:50%;place-items:center;width:2rem;height:2rem;margin-inline:auto;font-size:.9rem;font-weight:900;transition:color .22s,background-color .22s,transform .22s;display:grid}.source-table .source-join-key{transition:color .22s,background-color .22s,box-shadow .22s}.source-tables.is-join-preview .source-join-key{color:#075985;background:#e0f2fe;position:relative;box-shadow:inset 0 0 0 2px #38bdf8}.source-tables.is-join-preview .join-mark{color:#0369a1;background:#e0f2fe;font-size:0;transform:scale(1.08)}.source-tables.is-join-preview .join-mark:after{content:"=";font-size:.9rem}.source-tables.is-join-leaving{opacity:0;transition:opacity .18s,transform .18s;transform:translateY(-.35rem)scale(.98)}.table-scroll,.mini-table-scroll{scrollbar-width:thin;max-width:100%;overflow-x:auto}.select-flow-page .table-scroll{background:#fff;border-color:#dbe4ee;box-shadow:0 .45rem 1.2rem #0f172a0f}.select-flow-page .data-card .table-scroll,.select-flow-page .working-result .table-scroll{box-shadow:none;border:0;border-radius:0}.table-scroll:focus-visible{outline-offset:-3px}.select-flow-page table{border-collapse:collapse;width:100%;min-width:max-content;font-size:.68rem}.select-flow-page .source-table,.select-flow-page .working-table{table-layout:fixed;min-width:100%}.select-flow-page th,.select-flow-page td{text-align:left;white-space:nowrap;border-bottom:1px solid #eef2f7;padding:.48rem .58rem;transition:padding .36s,color .25s,background-color .25s,opacity .25s,font-size .36s}.select-flow-page thead th{color:#64748b;background:#fbfdff;font-size:.61rem;font-weight:800}.select-flow-page tbody tr:last-child td{border-bottom:0}.select-flow-page tbody td{color:#1e293b;background:#fff}.select-flow-page tbody tr:nth-child(2n) td{background:#f8fafc}.users-table th:first-child,.users-table td:first-child{width:30%}.users-table th:nth-child(2),.users-table td:nth-child(2){width:28%}.users-table th:nth-child(3),.users-table td:nth-child(3){width:42%}.source-table .source-join-key{color:#075985;background:#f0f9ff;font-weight:800}.working-table th:first-child,.working-table td:first-child{width:19%}.working-table th:nth-child(2),.working-table td:nth-child(2){width:17%}.working-table th:nth-child(3),.working-table td:nth-child(3){width:22%}.working-table th:nth-child(4),.working-table td:nth-child(4){width:16%}.working-table th:nth-child(5),.working-table td:nth-child(5){width:26%}.select-flow-page .working-table .join-key-source,.select-flow-page .working-table .join-key-target{color:#075985;text-align:center;background:#f0f9ff;font-weight:800}.working-table .column-origins th{letter-spacing:.04em;text-align:center;border-bottom:1px solid #bae6fd;padding-block:.2rem;font-size:.48rem;font-weight:850}.working-table .source-band-users{color:#475569;background:#f8fafc}.working-table .source-band-departments{color:#0369a1;background:#e0f2fe;border-left:2px dashed #38bdf8}.working-table thead tr:not(.column-origins) .join-key-target,.working-table tbody .join-key-target{border-left:2px dashed #38bdf8}.working-table .join-key-source{position:relative}.working-table tbody .join-key-source:after{z-index:1;color:#0369a1;content:"=";background:#fff;border:1px solid #7dd3fc;border-radius:50%;place-items:center;width:.84rem;height:.84rem;font-size:.52rem;display:grid;position:absolute;top:50%;right:-.42rem;transform:translateY(-50%)}.working-table th.join-key-source span,.working-table th.join-key-target span{color:#0284c7;margin-bottom:.12rem;font-size:.42rem;display:block}.select-flow-page .working-table .joined-column{color:#075985;background:#f0f9ff;border-left:2px solid #7dd3fc}.working-table th.joined-column span{color:#0284c7;margin-top:.16rem;font-size:.48rem;font-weight:800;display:block}.true-value,.false-value{border-radius:999px;padding:.08rem .35rem;font-size:.6rem;font-weight:800;display:inline-block}.true-value{color:#166534;background:#dcfce7}.false-value{color:#b91c1c;background:#fee2e2}.working-result{margin-top:.75rem;transition:margin-top .22s;animation:.42s cubic-bezier(.2,.75,.25,1) result-enter}.working-result.is-join-leaving{opacity:0;transition:opacity .18s,transform .18s;transform:translateY(.35rem)}.result-title{background:#eff6ff;border-bottom-color:#bfdbfe}.working-table tr[data-row=carol].is-filtering td{color:#991b1b;opacity:.38;background:#fff1f2;text-decoration:line-through}.working-table tr[data-row=carol].is-collapsing td,.working-table tr[data-row=carol].is-removed td{opacity:0;border:0;height:0;padding-block:0;font-size:0}.working-table tr[data-row=carol].is-removed,.working-table tr[data-row=carol].is-collapsing .join-key-source:after,.working-table tr[data-row=carol].is-removed .join-key-source:after{display:none}.where-result-note{color:#9f1239;background:#fff1f2;border-top:1px solid #fecdd3;margin:0;padding:.62rem .72rem;font-size:.66rem;line-height:1.5}.group-process-guide{background:#f8fafc;border-bottom:1px solid #dbe4ee;padding:.6rem .7rem}.group-process-guide ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.group-process-guide li{color:#94a3b8;background:#fff;border:1px solid #e2e8f0;border-radius:.45rem;align-items:center;gap:.4rem;min-width:0;padding:.45rem .5rem;font-size:.58rem;transition:color .22s,background-color .22s,border-color .22s;display:flex}.group-process-guide li>span{color:#64748b;background:#f1f5f9;border-radius:50%;flex:none;place-items:center;width:1.25rem;height:1.25rem;display:grid}.group-process-guide[data-phase=rows] li:first-child,.group-process-guide[data-phase=grouped] li:last-child{color:#075985;background:#f0f9ff;border-color:#7dd3fc}.group-process-guide[data-phase=rows] li:first-child>span,.group-process-guide[data-phase=grouped] li:last-child>span{color:#fff;background:#0284c7}.group-process-guide[data-phase=grouped] li:first-child{color:#166534;background:#f0fdf4;border-color:#86efac}.group-process-guide[data-phase=grouped] li:first-child>span{color:#fff;background:#16a34a}#rowView.is-group-preview{animation:.3s both result-enter}#rowView.is-group-preview-leaving{opacity:0;transition:opacity .18s,transform .18s;transform:translateY(-.35rem)}#rowView.is-group-preview tr[data-row=carol] td{opacity:0;border:0;height:0;padding-block:0;font-size:0;transition:none}.select-flow-page #rowView.is-group-preview tr[data-row=alice] td,.select-flow-page #rowView.is-group-preview tr[data-row=bob] td{background:#eff6ff}.select-flow-page #rowView.is-group-preview tr[data-row=alice] td{border-top:2px solid #60a5fa}.select-flow-page #rowView.is-group-preview tr[data-row=bob] td{border-bottom:2px solid #60a5fa}.select-flow-page #rowView.is-group-preview tr[data-row=alice] td:first-child,.select-flow-page #rowView.is-group-preview tr[data-row=bob] td:first-child{border-left:2px solid #60a5fa}.select-flow-page #rowView.is-group-preview tr[data-row=alice] td:last-child,.select-flow-page #rowView.is-group-preview tr[data-row=bob] td:last-child{border-right:2px solid #60a5fa}.select-flow-page #rowView.is-group-preview tr[data-row=dave] td{background:#f0fdf4;border-top:2px solid #4ade80;border-bottom:2px solid #4ade80}.select-flow-page #rowView.is-group-preview tr[data-row=dave] td:first-child{border-left:2px solid #4ade80}.select-flow-page #rowView.is-group-preview tr[data-row=dave] td:last-child{border-right:2px solid #4ade80}.select-flow-page #rowView.is-group-preview tr[data-row=eve] td{background:#fffbeb;border-top:2px solid #fbbf24;border-bottom:2px solid #fbbf24}.select-flow-page #rowView.is-group-preview tr[data-row=eve] td:first-child{border-left:2px solid #fbbf24}.select-flow-page #rowView.is-group-preview tr[data-row=eve] td:last-child{border-right:2px solid #fbbf24}.having-result-note{color:#92400e;background:#fffbeb;border-top:1px solid #fde68a;margin:0;padding:.62rem .72rem;font-size:.66rem;line-height:1.5}.group-view{gap:.55rem;padding:.75rem;display:grid}.group-card{border:1px solid #cbd5e1;border-radius:.7rem;max-height:14rem;padding:.7rem;transition:max-height .28s,padding .28s,border-width .28s,opacity .22s,transform .22s;display:block;overflow:hidden}.group-view[data-phase=hidden] .group-card{opacity:0;transform:translateY(.45rem)scale(.98)}.group-view[data-phase=revealing] .group-card{opacity:0;transform:translateY(.65rem)scale(.98)}.group-view[data-phase=labels] .group-card{animation:.42s both group-enter}.group-card:nth-of-type(2){animation-delay:80ms}.group-card:nth-of-type(3){animation-delay:.16s}.group-sales{background:#eff6ff}.group-dev{background:#f0fdf4}.group-support{background:#fffbeb}.group-meta{justify-content:space-between;align-items:center;gap:.4rem;display:flex}.group-meta strong{color:var(--color-dark,#0f172a);font-size:.75rem}.group-meta span{color:#64748b;font-family:SFMono-Regular,Consolas,monospace;font-size:.6rem}.group-column-header,.group-row{grid-template-columns:19% 17% 22% 16% 26%;align-items:center;display:grid}.group-column-header{color:#64748b;padding:.3rem .7rem;font-size:.56rem;font-weight:800;transition:opacity .3s,transform .38s cubic-bezier(.2,.75,.25,1)}.group-column-header span,.group-row>*{text-align:center;overflow-wrap:anywhere;min-width:0;padding-inline:.15rem}.group-column-header span:first-child,.group-row>:first-child{text-align:left}.group-rows{gap:.3rem;margin-top:.5rem;transition:opacity .3s,transform .38s cubic-bezier(.2,.75,.25,1);display:grid}.group-row{color:#334155;background:#ffffffdb;border:1px solid #94a3b866;border-radius:.45rem;min-height:2rem;font-size:.6rem}.group-row strong{color:#075985;font-size:.6rem}.group-row .true-value{justify-self:center;padding:.06rem .24rem;font-size:.5rem}.group-view[data-phase=labels] .group-column-header,.group-view[data-phase=hidden] .group-column-header,.group-view[data-phase=revealing] .group-column-header,.group-view[data-phase=labels] .group-rows,.group-view[data-phase=hidden] .group-rows,.group-view[data-phase=revealing] .group-rows,.group-view[data-phase=labels] .group-meta span,.group-view[data-phase=hidden] .group-meta span,.group-view[data-phase=revealing] .group-meta span{opacity:0;transform:translate(.7rem)}.group-card.is-filtering{opacity:.25;transform:scale(.97)}.group-card.is-removed{opacity:0;border-width:0;max-height:0;padding-block:0;overflow:hidden}.group-view.is-select-preview .group-sales .group-meta>[data-select-column]{background:#fff;border:2px solid #22c55e;border-radius:.5rem;padding:1rem .55rem .35rem;transition:padding .22s,border-color .22s,box-shadow .22s;position:relative;box-shadow:0 .35rem .8rem #22c55e24}.group-view.is-select-preview .group-sales .group-meta>[data-select-column]:before{color:#15803d;content:attr(data-select-column);font-family:SFMono-Regular,Consolas,monospace;font-size:.44rem;font-weight:800;position:absolute;top:.2rem;left:.45rem}.group-view.is-select-preview .group-sales .group-rows{opacity:.22;transform:scale(.98)}.group-view.is-select-leaving{opacity:0;transition:opacity .18s,transform .18s;transform:translateY(-.35rem)}.final-view.is-select-reversing{opacity:0;transition:opacity .18s,transform .18s;transform:translateY(.35rem)}.final-view{padding:0;animation:.42s cubic-bezier(.2,.75,.25,1) result-enter}.final-view table{min-width:100%}.final-view td{color:#166534;background:#f0fdf4}.final-view p{color:#166534;text-align:center;margin:0;padding:.65rem .75rem;font-size:.67rem;font-weight:750}.transformation-caption{color:#475569;border:1px solid var(--color-border,#e2e8f0);border-left:4px solid var(--color-primary,#16a34a);background:#f8fafc;border-radius:.6rem;min-height:3.2rem;margin:0;padding:.7rem;font-size:.7rem;line-height:1.6}.transformation-caption strong{color:#166534}.visualizer-controls{border:1px solid var(--color-border,#e2e8f0);background:#fff;border-radius:.85rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:0 .1rem .75rem;padding:.55rem;display:grid}.flow-control{border-radius:.7rem;justify-content:center;align-items:center;gap:.35rem;min-height:2.75rem;padding:.55rem .75rem;font-size:.75rem;transition:color .16s,background-color .16s,border-color .16s,box-shadow .16s,transform .16s;display:inline-flex}.flow-control-secondary{color:#334155;border:1px solid var(--color-border,#e2e8f0);background:#fff}.flow-control-primary{color:#fff;background:var(--color-primary,#16a34a);box-shadow:0 7px 20px #16a34a33}.flow-control:disabled{box-shadow:none;opacity:.36}@media (hover:hover) and (pointer:fine){.flow-control-secondary:not(:disabled):hover{color:#166534;background:#f0fdf4;border-color:#86efac;transform:translateY(-1px);box-shadow:0 6px 16px #16a34a1a}.flow-control-primary:not(:disabled):hover{background:var(--color-primary-hover,#15803d);transform:translateY(-1px);box-shadow:0 9px 24px #16a34a42}}.step-counter{color:#64748b;white-space:nowrap;font-size:.72rem;font-weight:800}.scroll-lessons{gap:1rem;display:grid}.scroll-lesson{border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,1.25rem);min-height:14rem;box-shadow:var(--shadow-sm,0 4px 12px #0f172a0a);background:#fff;padding:1.35rem;transition:border-color .18s,box-shadow .18s,transform .18s;position:relative}.scroll-lesson.is-current{border-color:#86efac;box-shadow:0 12px 30px #16a34a1a}.lesson-number{color:#166534;background:var(--color-primary-soft,#dcfce7);border-radius:50%;place-items:center;width:2.1rem;height:2.1rem;font-size:.75rem;font-weight:900;display:grid;position:absolute;top:1rem;right:1rem}.lesson-label{color:var(--color-primary,#16a34a);letter-spacing:.12em;margin:0;font-size:.66rem;font-weight:850}.scroll-lesson h3{color:var(--color-dark,#0f172a);letter-spacing:-.03em;margin:.25rem 0 .7rem;font-size:clamp(1.45rem,3vw,2rem)}.scroll-lesson>p:not(.lesson-label){color:#64748b;margin:0;font-size:.88rem}.scroll-lesson code{color:#0f766e;background:#f0fdfa;border-radius:.3rem;padding:.12rem .28rem}.scroll-lesson a{color:var(--color-primary-hover,#15803d);gap:.35rem;margin-top:1rem;font-size:.78rem;font-weight:800;text-decoration:none;display:inline-flex}.scroll-lesson a:hover{text-underline-offset:.2rem;text-decoration:underline}.mental-model-section{border-block:1px solid var(--color-border,#e2e8f0)}.flow-summary{gap:1.8rem;margin:0;padding:0;list-style:none;display:grid}.flow-summary li{border:1px solid var(--color-border,#e2e8f0);text-align:center;min-height:7.2rem;box-shadow:var(--shadow-sm,0 4px 12px #0f172a0a);background:#fff;border-radius:1rem;place-items:center;gap:.15rem;padding:1rem;display:grid;position:relative}.flow-summary li:not(:last-child):after{color:#94a3b8;content:"↓";font-size:1.1rem;position:absolute;bottom:-1.65rem;left:50%;transform:translate(-50%)}.flow-summary span{color:var(--color-primary,#16a34a);letter-spacing:.1em;font-size:.62rem;font-weight:850}.flow-summary strong{color:var(--color-dark,#0f172a);font-size:.92rem}.flow-summary small{color:#64748b;font-size:.72rem;font-weight:700}.logic-order-card{background:var(--color-dark,#0f172a);border-radius:var(--radius-md,1.25rem);align-items:center;gap:1rem;margin-top:2.5rem;padding:1.3rem;display:grid}.logic-order-card>span{color:#64748b;text-align:center;font-size:1.5rem;font-weight:900}.logic-order-card p{color:#86efac}.logic-order-card code{overflow-wrap:anywhere;color:#e2e8f0;font-size:.76rem;line-height:1.7;display:block}.optimizer-note{color:#64748b;text-align:center;max-width:820px;margin:1rem auto 0;font-size:.8rem}.join-inputs{align-items:center;gap:.75rem;max-width:700px;margin:0 auto 2rem;display:grid}.join-inputs>div{border:1px solid var(--color-border,#e2e8f0);background:#f8fafc;border-radius:.85rem;gap:.65rem;padding:1rem;display:grid}.join-inputs>div strong{color:var(--color-dark,#0f172a)}.join-input-table table{border:1px solid var(--color-border,#e2e8f0);table-layout:fixed;background:#fff;border-radius:.65rem;min-width:100%;overflow:hidden}.select-flow-page .join-input-table .join-source-key{color:#075985;background:#f0f9ff;font-weight:800}.join-inputs>span{color:#94a3b8;text-align:center;font-size:1.5rem;font-weight:900}.join-type-grid{gap:1rem;display:grid}.join-type-card{border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,1.25rem);box-shadow:var(--shadow-sm,0 4px 12px #0f172a0a);background:#fff;padding:1.3rem}.join-type-card>p{color:var(--color-primary,#16a34a);margin:0;font-size:.7rem;font-weight:850}.join-type-card h3{color:var(--color-dark,#0f172a);margin:.2rem 0 1rem;font-size:1.2rem}.join-type-card table{border:1px solid var(--color-border,#e2e8f0);border-radius:.65rem;min-width:100%;overflow:hidden}.join-type-card em{color:#b91c1c;font-style:normal;font-weight:800}.select-flow-page .join-type-card .join-omitted-row td{color:#94a3b8;background:#fff;border-top:1px dashed #cbd5e1;border-bottom:1px dashed #cbd5e1;-webkit-text-decoration:line-through #cbd5e1;text-decoration:line-through #cbd5e1}.select-flow-page .join-type-card .join-omitted-row td:first-child{border-left:1px dashed #cbd5e1}.select-flow-page .join-type-card .join-omitted-row td:last-child{border-right:1px dashed #cbd5e1}.join-type-card>small{color:#64748b;margin-top:.85rem;line-height:1.65;display:block}.filter-compare-section{border-block:1px solid var(--color-border,#e2e8f0)}.filter-compare-grid{align-items:stretch;gap:1rem;max-width:920px;margin-inline:auto;display:grid}.filter-compare-grid article{border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,1.25rem);box-shadow:var(--shadow-sm,0 4px 12px #0f172a0a);background:#fff;flex-direction:column;padding:1.5rem;display:flex}.compare-chip{color:#166534;background:var(--color-primary-soft,#dcfce7);letter-spacing:.08em;border-radius:999px;padding:.3rem .55rem;font-size:.62rem;font-weight:850;display:inline-flex}.filter-compare-grid h3{color:var(--color-dark,#0f172a);margin:.8rem 0 .55rem;font-size:1.25rem}.filter-compare-grid p{color:#64748b;margin:0;font-size:.88rem}.compare-example{margin:1rem 0}.compare-example table{border:1px solid var(--color-border,#e2e8f0);table-layout:fixed;background:#fff;border-radius:.65rem;min-width:100%;overflow:hidden}.compare-example tbody strong{color:#15803d}.compare-example tbody em{color:#b91c1c;font-style:normal;font-weight:800}.compare-example .is-excluded td{color:#94a3b8;background:#fff1f2;-webkit-text-decoration:line-through #fda4af;text-decoration:line-through #fda4af}.compare-example>small{color:#64748b;margin-top:.55rem;font-size:.72rem;display:block}.compare-example>small strong{color:#be123c}.compare-result{margin-top:.75rem}.compare-result>span{color:#15803d;margin-bottom:.4rem;font-size:.68rem;font-weight:850;display:block}.select-flow-page .compare-result tbody td{background:#f0fdf4}.filter-compare-grid code{color:#bae6fd;background:var(--color-dark,#0f172a);white-space:nowrap;border-radius:.65rem;margin-top:.75rem;padding:.75rem;font-size:.75rem;display:block;overflow-x:auto}.compare-divider{color:#fff;background:#64748b;border-radius:50%;align-self:center;place-items:center;width:2.6rem;height:2.6rem;margin-inline:auto;font-size:.68rem;font-weight:900;display:grid}.next-learning-grid{gap:1rem;display:grid}.next-learning-grid a{color:inherit;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,1.25rem);box-shadow:var(--shadow-sm,0 4px 12px #0f172a0a);background:#fff;gap:.35rem;padding:1.35rem;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s;display:grid}.next-learning-grid a:hover{border-color:#86efac;transform:translateY(-2px);box-shadow:0 14px 30px #16a34a17}.next-learning-grid span{color:var(--color-primary,#16a34a);letter-spacing:.1em;font-size:.64rem;font-weight:850}.next-learning-grid strong{color:var(--color-dark,#0f172a);font-size:1.05rem}.next-learning-grid small{color:#64748b;font-weight:700}.flow-final-cta>.container>p:not(.final-cta-character,.final-cta-note){max-width:700px}@keyframes result-enter{0%{opacity:0;transform:translateY(.7rem)scale(.985)}to{opacity:1;transform:none}}@keyframes group-enter{0%{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}@media (width<=759px){.step-tabs{scroll-behavior:smooth;scrollbar-width:none;scroll-padding-inline:1rem}.step-tabs::-webkit-scrollbar{display:none}.query-panel .panel-heading{min-height:2rem}.query-panel pre{height:4.9rem;padding:.45rem .65rem;font-size:0;position:relative;overflow:hidden}.query-panel pre code{height:100%;display:block}.query-panel code>span[data-sql-step]{opacity:0;pointer-events:none;transform:translateY(calc(-50% + var(--sql-offset)));margin:0;font-size:.68rem;line-height:1.55;transition:color .22s,background-color .22s,border-color .22s,opacity .22s,transform .36s cubic-bezier(.2,.75,.25,1);position:absolute;top:50%;left:.65rem;right:.65rem}.query-panel code>span[data-sql-step].is-current{opacity:1;pointer-events:auto}.query-note{display:none}.scroll-lessons{overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y pinch-zoom;gap:.75rem;margin-inline:-1rem;padding:.5rem 1rem 1rem;scroll-padding-inline:1rem;display:flex;overflow-x:auto}.scroll-lessons::-webkit-scrollbar{display:none}.scroll-lesson{opacity:.42;scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 calc(100% - 5rem);min-height:18rem;transform:scale(.98)}.scroll-lesson:first-child{margin-inline-start:2.5rem}.scroll-lesson:last-child{margin-inline-end:2.5rem}.scroll-lesson.is-current{opacity:1;transform:none}}@media (width>=520px){.flow-hero-actions{flex-direction:row}.flow-hero-actions .button{width:auto}.source-tables{grid-template-columns:minmax(0,1.45fr) auto minmax(0,.9fr)}.join-inputs{grid-template-columns:1fr auto 1fr}.flow-summary{grid-template-columns:repeat(2,1fr)}.flow-summary li:nth-child(odd):not(:last-child):after,.flow-summary li:nth-child(2n):not(:last-child):after{content:"→";inset:50% -1.25rem auto auto;transform:translateY(-50%)}.flow-summary li:nth-child(2n):not(:last-child):after{content:"↓";inset:auto auto -1.65rem 50%;transform:translate(-50%)}.next-learning-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=760px){.visualizer[data-step="5"] .working-result{margin-top:2rem}.flow-hero{padding-block:4.5rem 5rem}.visualizer{padding:1rem}.visualizer-workspace{grid-template-columns:minmax(13rem,.64fr) minmax(0,1.55fr);align-items:start}.query-panel{align-self:start}.query-panel pre{padding:1.15rem;font-size:.72rem}.stage-panel{padding:1.1rem}.data-stage{min-height:17rem}.flow-summary{grid-template-columns:repeat(3,1fr)}.flow-summary li:nth-child(2n):not(:last-child):after{content:"→";inset:50% -1.25rem auto auto;transform:translateY(-50%)}.flow-summary li:nth-child(3):not(:last-child):after{content:"↓";inset:auto auto -1.65rem 50%;transform:translate(-50%)}.logic-order-card{grid-template-columns:1fr auto 1fr;padding:1.5rem}.join-type-grid{grid-template-columns:repeat(3,1fr)}.filter-compare-grid{grid-template-columns:1fr auto 1fr}.next-learning-grid{grid-template-columns:repeat(4,1fr)}}@media (width>=980px){.visualizer-section{padding-bottom:3rem}.flow-hero-grid{grid-template-columns:minmax(0,1.7fr) minmax(18rem,.75fr);align-items:center}.learning-experience{grid-template-columns:minmax(0,1.9fr) minmax(15rem,.72fr);align-items:start}.visualizer{padding:.5rem;position:sticky;top:4.5rem}.visualizer-topbar{padding:0 .25rem .4rem}.visualizer-label{display:none}.step-tabs{padding-bottom:.45rem}.step-tab{min-height:2.45rem}.visualizer-controls{margin-bottom:.5rem;padding:.25rem}.flow-control{min-height:2.4rem;padding-block:.35rem}.stage-panel{padding:.75rem}.data-stage{min-height:12rem;padding-block:.45rem .3rem}.visualizer table{font-size:.66rem}.visualizer th,.visualizer td{padding:.3rem .45rem}.visualizer thead th{font-size:.58rem}.scroll-lessons{gap:2.5rem;padding-bottom:17rem}.scroll-lesson{flex-direction:column;justify-content:center;min-height:45vh;scroll-margin-top:4.5rem;display:flex}.flow-summary{grid-template-columns:repeat(6,1fr)}.flow-summary li:not(:last-child):after,.flow-summary li:nth-child(3):not(:last-child):after{content:"→";inset:50% -1.25rem auto auto;transform:translateY(-50%)}}@media (width>=1160px){.query-panel pre{font-size:.76rem}.join-types-section table{font-size:.72rem}}@media (width<=420px){.visualizer{border-radius:1.1rem;margin-inline:-.35rem;padding:.65rem}.stage-panel{padding:.75rem}.data-stage{min-height:0}.group-column-header{font-size:.5rem}.group-row,.group-row strong{font-size:.55rem}.flow-control{padding-inline:.55rem}.select-flow-page th,.select-flow-page td{padding-inline:.42rem}.working-table th.joined-column span{font-size:.44rem}}@media (prefers-reduced-motion:reduce){.select-flow-page *,.select-flow-page :before,.select-flow-page :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}