.article-body .join-stage{margin-block:28px 36px}.join-stage{--join-border: #cbded7;--join-ink: #1b3931;--join-muted: #58746a;--join-panel: #ffffff;--join-panel-border: #d1e3dc;--join-panel-line: #e3eee9;--join-panel-shadow: rgba(255, 255, 255, .8);--join-order-icon-bg: #e8f0ff;--join-order-icon-ink: #3265a8;--join-customer-icon-bg: #dcf5e9;--join-customer-icon-ink: #147c5e;--join-operator-border: #a6d8c6;--join-operator-bg: #e2f7ed;--join-operator-ink: #168461;--join-link-ink: #216f59;--join-link-track: #bdd8cd;--join-link-progress: #159e75;--join-key-ink: #063c2f;--join-result-border: #aad9c5;--join-result-bg: linear-gradient(115deg, #e5f7ed, #f3fbf7);--join-result-row-bg: #cef0dd;--join-result-row-ink: #194c3a;--join-check-bg: #169f77;--join-check-ink: #ffffff;--join-control-border: #aed0c3;--join-control-bg: rgba(255, 255, 255, .82);--join-control-hover: #ddf5e9;overflow:hidden;padding:clamp(20px,4vw,40px);border:1px solid var(--join-border);border-radius:24px;background:radial-gradient(circle at 15% 5%,rgba(47,191,145,.13),transparent 30%),radial-gradient(circle at 90% 95%,rgba(47,191,145,.09),transparent 33%),#f5fbf8;box-shadow:0 18px 46px #164f3a17;color:var(--join-ink)}html.dark .join-stage{--join-border: #263b43;--join-ink: #eef8f4;--join-muted: #9bb3b4;--join-panel: rgba(24, 39, 48, .92);--join-panel-border: #32434b;--join-panel-line: #3a4a52;--join-panel-shadow: rgba(255, 255, 255, .04);--join-order-icon-bg: #293f5b;--join-order-icon-ink: #9cc5ff;--join-customer-icon-bg: #254c46;--join-customer-icon-ink: #7be2bf;--join-operator-border: #3a6960;--join-operator-bg: #183d38;--join-operator-ink: #73e4c2;--join-link-ink: #bcf7e5;--join-link-track: #385b5d;--join-link-progress: #39dcb0;--join-key-ink: #eafff6;--join-result-border: #3c7968;--join-result-bg: linear-gradient(115deg, rgba(40, 105, 88, .26), rgba(20, 47, 49, .65));--join-result-row-bg: #276452;--join-result-row-ink: #f2fff9;--join-check-bg: #38cfa7;--join-check-ink: #0a2925;--join-control-border: #42605d;--join-control-bg: rgba(255, 255, 255, .05);--join-control-hover: rgba(56, 207, 167, .13);background:radial-gradient(circle at 15% 5%,rgba(50,162,135,.2),transparent 30%),radial-gradient(circle at 90% 95%,rgba(50,162,135,.12),transparent 33%),#0e1b23;box-shadow:0 24px 70px #0d25282e}.join-stage-topline,.join-stage-topline>div{display:flex;align-items:center}.join-stage-topline{justify-content:space-between;gap:16px;margin-bottom:27px}.join-stage-topline>div{gap:10px}.join-live-dot{width:8px;height:8px;border-radius:50%;background:#38cfa7;box-shadow:0 0 0 5px #38cfa71f}.join-stage-kicker{color:var(--join-muted);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em}.join-control{min-width:76px;padding:7px 12px;border:1px solid var(--join-control-border);border-radius:999px;background:var(--join-control-bg);color:var(--join-ink);cursor:pointer;font-size:.8rem}.join-control:hover,.join-control:focus-visible{border-color:var(--join-link-progress);background:var(--join-control-hover)}.join-tables{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);align-items:center;gap:14px}.join-table-card{min-width:0;padding:19px;border:1px solid var(--join-panel-border);border-radius:16px;background:var(--join-panel);box-shadow:inset 0 1px var(--join-panel-shadow)}.join-table-header{display:flex;align-items:center;gap:11px;margin-bottom:18px}.join-table-header div{display:flex;flex-direction:column;gap:1px}.join-table-header strong{font-family:var(--font-mono);font-size:.94rem;line-height:1.2}.join-table-header div>span{color:var(--join-muted);font-size:.72rem}.join-table-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;font-family:var(--font-mono);font-size:.82rem;font-weight:800}.join-table-icon-order{background:var(--join-order-icon-bg);color:var(--join-order-icon-ink)}.join-table-icon-customer{background:var(--join-customer-icon-bg);color:var(--join-customer-icon-ink)}.join-table-columns,.join-table-row,.join-result-columns,.join-result-row{display:grid;grid-template-columns:1fr 1.35fr 1fr;align-items:center;gap:8px}.join-table-columns,.join-result-columns{padding:0 10px 9px;border-bottom:1px solid var(--join-panel-line);color:var(--join-muted);font-family:var(--font-mono);font-size:clamp(.57rem,1vw,.7rem);white-space:nowrap}.join-table-row{min-height:39px;padding:4px 10px;border-bottom:1px solid var(--join-panel-line);border-radius:6px;color:var(--join-ink);font-size:.84rem}.join-table-row:last-child{border-bottom:0}.join-table-row>span:first-child{font-family:var(--font-mono)}.join-customer-columns,.join-customer-row{grid-template-columns:1.15fr 1fr}.join-key{justify-self:start;min-width:26px;padding:1px 7px;border-radius:6px;color:var(--join-key-ink);font-family:var(--font-mono);font-weight:700;text-align:center}.join-operator{display:flex;align-items:center;flex-direction:column;color:var(--join-muted);font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.06em}.join-operator b{display:grid;place-items:center;width:46px;height:46px;margin-top:6px;border:1px solid var(--join-operator-border);border-radius:14px;background:var(--join-operator-bg);color:var(--join-operator-ink);font-size:1.35rem}.join-link{display:grid;grid-template-columns:max-content minmax(60px,1fr) max-content;align-items:center;gap:12px;margin:25px 2px}.join-link-key{color:var(--join-link-ink);font-family:var(--font-mono);font-size:clamp(.57rem,1.2vw,.75rem);font-weight:600;white-space:nowrap}.join-link svg{width:100%;height:28px;overflow:visible}.join-link-track{fill:none;stroke:var(--join-link-track);stroke-width:2}.join-link-progress{fill:none;stroke:var(--join-link-progress);stroke-width:3;stroke-linecap:round;stroke-dasharray:290;stroke-dashoffset:290}.join-link-spark{fill:var(--join-link-progress);filter:drop-shadow(0 0 6px var(--join-link-progress));opacity:0}.join-result{padding:20px;border:1px solid var(--join-result-border);border-radius:16px;background:var(--join-result-bg)}.join-result-heading{display:flex;align-items:center;gap:10px;margin-bottom:15px}.join-result-heading>div{display:flex;flex-direction:column}.join-result-heading strong{font-size:.88rem}.join-result-heading div>span{color:var(--join-muted);font-size:.7rem}.join-result-check{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--join-check-bg);color:var(--join-check-ink);font-size:.9rem;font-weight:900}.join-result-table{max-width:630px}.join-result-columns{grid-template-columns:1fr 1.35fr 1fr}.join-result-row{grid-template-columns:1fr 1.35fr 1fr;min-height:40px;padding:5px 10px;border-radius:7px;background:var(--join-result-row-bg);color:var(--join-result-row-ink);font-size:.84rem;font-weight:700}.join-result-row>span:first-child{font-family:var(--font-mono)}.join-stage[data-motion-ready] [data-link-left],.join-stage[data-motion-ready] [data-link-right],.join-stage[data-motion-ready] [data-result-row],.join-stage[data-motion-ready] [data-result-check]{opacity:0}.join-stage .join-stage-caption{margin:19px 0 0;color:var(--join-muted);font-size:.79rem;line-height:1.7}@media(max-width:760px){.join-tables{grid-template-columns:minmax(0,1fr)}.join-operator{flex-direction:row;justify-content:center;gap:8px}.join-operator b{width:34px;height:34px;margin:0;border-radius:10px}.join-link{gap:6px;margin:20px 0}.join-link-key{font-size:.55rem}.join-table-card{padding:16px}}@media(max-width:450px){.join-link{grid-template-columns:1fr;justify-items:center}.join-link svg{width:65%}.join-stage{border-radius:18px}}.article-body .db-motion{margin:28px 0;padding:clamp(18px,3vw,26px);border:1px solid var(--hairline);border-radius:16px;background:var(--surface);box-shadow:0 10px 32px #0f172a0b;line-height:1.45}.db-motion-heading{display:grid;margin-bottom:18px}.db-motion-heading strong{color:var(--ink);font-size:1.06rem}.article-body .db-motion figcaption{margin-top:18px;color:var(--slate);font-size:.82rem}.db-relation-head,.db-relation-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(46px,.6fr) minmax(0,1fr);align-items:center;gap:10px}.db-relation-head{margin-bottom:10px;color:var(--slate);font-family:var(--font-mono);font-size:.68rem;text-align:center}.db-relation-pair+.db-relation-pair{margin-top:9px}.db-relation-record{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:10px 12px;border:1px solid var(--hairline);border-radius:8px;color:var(--charcoal);background:var(--canvas);font-size:.8rem}.db-relation-record b{display:inline-grid;place-items:center;min-width:1.55rem;padding:2px 5px;border-radius:5px;color:var(--brand-green-deep);background:var(--brand-green-soft);font-family:var(--font-mono)}.db-relation-path{position:relative;height:2px;border-radius:999px;background:var(--hairline)}.db-relation-path:after{position:absolute;top:50%;right:-1px;width:8px;height:8px;border-top:2px solid var(--brand-green);border-right:2px solid var(--brand-green);content:"";transform:translateY(-50%) rotate(45deg)}.db-relation-path span{display:block;width:100%;height:100%;background:var(--brand-green)}.db-relation-motion.is-running .db-relation-path span{animation:db-route-cycle 3.6s ease-out infinite both;animation-delay:calc(var(--motion-order) * .9s)}.db-relation-motion.is-running .db-relation-pair .db-relation-record:last-child{animation:db-record-cycle 3.6s ease-out infinite both;animation-delay:calc(var(--motion-order) * .9s + .35s)}.article-body .db-tx-start{margin:0 0 12px;color:var(--slate);font-family:var(--font-mono);font-size:.75rem}.db-tx-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.db-tx-lane{min-width:0;padding:14px;border:1px solid var(--hairline);border-radius:10px;background:var(--canvas)}.db-tx-label{display:block;margin-bottom:12px;color:var(--slate);font-size:.78rem;font-weight:700}.db-tx-steps{display:grid;gap:7px}.db-tx-steps span{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px;border:1px solid var(--hairline);border-radius:6px;color:var(--charcoal);background:var(--surface);font-family:var(--font-mono);font-size:.73rem}.db-tx-failure b{color:#b45332;white-space:nowrap}.db-tx-changes{display:flex;align-items:center;gap:7px;min-height:33px;margin-top:12px}.db-tx-change{position:relative;padding:5px 9px;border-radius:6px;color:var(--brand-green-deep);background:var(--brand-green-soft);font-size:.72rem;font-weight:700}.db-tx-reverted{color:#b45332;background:#fff0e9}.db-tx-reverted:after{position:absolute;top:50%;right:6px;left:6px;height:2px;background:#b45332;content:""}.db-tx-effect{display:block;min-height:1.25rem;font-size:.75rem;font-weight:700}.db-tx-commit .db-tx-effect{color:var(--brand-green-deep)}.db-tx-rollback .db-tx-effect{color:#b45332}.db-tx-commit .db-tx-steps span:last-child,.db-tx-commit .db-tx-outcome{color:var(--brand-green-deep)}.db-tx-rollback .db-tx-steps span:last-child,.db-tx-rollback .db-tx-outcome{color:#b45332}.db-tx-outcome{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--hairline);font-size:.82rem}.db-transaction-motion.is-running .db-tx-steps span{animation:db-step-cycle 6.4s ease-out infinite both}.db-transaction-motion.is-running .db-tx-steps span:nth-child(1){animation-delay:.15s}.db-transaction-motion.is-running .db-tx-steps span:nth-child(2){animation-delay:1.2s}.db-transaction-motion.is-running .db-tx-steps span:nth-child(3){animation-delay:2.25s}.db-transaction-motion.is-running .db-tx-steps span:nth-child(4){animation-delay:3.65s}.db-transaction-motion.is-running .db-tx-steps span.db-tx-failure{animation-name:db-failure-cycle}.db-transaction-motion.is-running .db-tx-rollback .db-tx-steps span:last-child{animation-name:db-rollback-step-cycle}.db-transaction-motion.is-running .db-tx-commit .db-tx-customer,.db-transaction-motion.is-running .db-tx-commit .db-tx-order,.db-transaction-motion.is-running .db-tx-rollback .db-tx-customer,.db-transaction-motion.is-running .db-tx-reverted:after,.db-transaction-motion.is-running .db-tx-effect{animation-duration:6.4s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-fill-mode:both}.db-transaction-motion.is-running .db-tx-commit .db-tx-customer{animation-name:db-customer-added}.db-transaction-motion.is-running .db-tx-commit .db-tx-order{animation-name:db-order-added}.db-transaction-motion.is-running .db-tx-rollback .db-tx-customer{animation-name:db-customer-reverted}.db-transaction-motion.is-running .db-tx-reverted:after{animation-name:db-cross-out}.db-transaction-motion.is-running .db-tx-effect{animation-name:db-effect-appear;animation-delay:4s}.db-transaction-motion.is-running .db-tx-commit .db-tx-outcome{animation:db-record-cycle 6.4s ease-out 4.65s infinite both}.db-transaction-motion.is-running .db-tx-rollback .db-tx-outcome{animation:db-rollback-outcome-cycle 6.4s ease-out 4.65s infinite both}@keyframes db-route-cycle{0%{transform:scaleX(0);transform-origin:left center}18%,74%{transform:scaleX(1);transform-origin:left center}92%,to{transform:scaleX(0);transform-origin:left center}}@keyframes db-record-cycle{0%{box-shadow:0 0 0 0 transparent}10%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-green) 18%,transparent)}22%,to{box-shadow:0 0 0 0 transparent}}@keyframes db-step-cycle{0%{border-color:var(--hairline);background:var(--surface)}4%{border-color:var(--brand-green);background:var(--brand-green-soft)}12%,to{border-color:var(--hairline);background:var(--surface)}}@keyframes db-failure-cycle{0%{transform:translate(0);border-color:var(--hairline);background:var(--surface)}4%{transform:translate(-3px);border-color:#d56b4b;background:#fff0e9}7%{transform:translate(3px);border-color:#d56b4b;background:#fff0e9}10%,24%{transform:translate(0);border-color:#d56b4b;background:#fff0e9}34%,to{transform:translate(0);border-color:var(--hairline);background:var(--surface)}}@keyframes db-rollback-step-cycle{0%{border-color:var(--hairline);background:var(--surface)}4%{border-color:#d56b4b;background:#fff0e9}12%,to{border-color:var(--hairline);background:var(--surface)}}@keyframes db-customer-added{0%,15%{opacity:0;transform:translateY(4px)}22%,88%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes db-order-added{0%,32%{opacity:0;transform:translateY(4px)}39%,88%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes db-customer-reverted{0%,15%{opacity:0;transform:translateY(4px)}22%,50%{opacity:1;transform:translateY(0)}64%,to{opacity:0;transform:translateY(4px)}}@keyframes db-cross-out{0%,42%{transform:scaleX(0);transform-origin:left center}52%,to{transform:scaleX(1);transform-origin:left center}}@keyframes db-effect-appear{0%{opacity:0;transform:translateY(4px)}6%,28%{opacity:1;transform:translateY(0)}40%,to{opacity:0;transform:translateY(4px)}}@keyframes db-rollback-outcome-cycle{0%{box-shadow:0 0 0 0 transparent}10%{box-shadow:0 0 0 4px #f3d5c9}22%,to{box-shadow:0 0 0 0 transparent}}@media(max-width:640px){.db-tx-lanes{grid-template-columns:1fr}.db-relation-head,.db-relation-pair{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:5px}.db-relation-head{font-size:.55rem}.db-relation-record{padding:8px 6px;font-size:.68rem}}@media(prefers-reduced-motion:reduce){.db-relation-motion.is-running .db-relation-path span,.db-relation-motion.is-running .db-relation-pair .db-relation-record:last-child,.db-transaction-motion.is-running .db-tx-steps span,.db-transaction-motion.is-running .db-tx-steps span.db-tx-failure,.db-transaction-motion.is-running .db-tx-rollback .db-tx-steps span:last-child,.db-transaction-motion.is-running .db-tx-change,.db-transaction-motion.is-running .db-tx-reverted:after,.db-transaction-motion.is-running .db-tx-effect,.db-transaction-motion.is-running .db-tx-outcome{animation:none}}
