:where(#overviewView) .product-intro{padding:62px 0 36px;overflow:visible}:where(#overviewView) .intro-copy h1{font-size:clamp(44px,5.6vw,72px);line-height:1.15}:where(#overviewView) .intro-copy .family-eyebrow{margin-bottom:18px}:where(#overviewView) .intro-copy>p:not(.family-eyebrow){margin-top:20px;font-size:17px}:where(#overviewView) .intro-actions{margin-top:22px}:where(#overviewView) .evidence-stage{height:480px;position:relative;max-width:1020px;margin:22px auto 0;text-align:left;isolation:isolate;perspective:1400px}:where(#overviewView) .stage-floor{position:absolute;inset:12% -8% -4%;z-index:-1;background:radial-gradient(ellipse at 57% 75%,#bfd3ef77,transparent 62%);border-radius:50%}:where(#overviewView) .query-object{position:absolute;left:30%;top:34px;width:53%;height:360px;border-radius:24px;background:linear-gradient(140deg,#397bd7,#184a9a 70%,#103b78);color:white;box-shadow:0 28px 38px -20px #102f7180,inset 0 1px 1px #ffffff8c;transform:rotate(5deg);transition:transform .45s ease;overflow:hidden}:where(#overviewView) .query-object header{display:flex;align-items:center;gap:9px;padding:17px 22px;border-bottom:1px solid #ffffff26;font:10px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1px;color:#dfebff}:where(#overviewView) .query-object header>span:last-child{margin-left:auto;letter-spacing:0}:where(#overviewView) .object-dot{width:6px;height:6px;border-radius:50%;background:#9ecbff}:where(#overviewView) .query-body{padding:25px 36px 24px 104px}:where(#overviewView) .query-body small{color:#c2dcff;font-size:12px}:where(#overviewView) .query-body h2{margin:9px 0 15px;font-size:30px;line-height:1.3;letter-spacing:-1px}:where(#overviewView) .query-body pre{margin:0;color:#dfebff;font:12px/1.8 Menlo,monospace;white-space:pre-wrap}:where(#overviewView) .query-body b{color:#91c7ff;font-weight:500}:where(#overviewView) .query-foot{margin-top:15px;display:flex;gap:13px;color:#c2dcff;font:10px Menlo,monospace}:where(#overviewView) .ticket-object{position:absolute;left:9%;top:64px;width:300px;min-height:344px;padding:25px 26px 20px;background:linear-gradient(105deg,#fff,#f9f7ef);color:#282a30;border-radius:5px 5px 13px 13px;box-shadow:0 25px 40px -20px #5c514b70,0 2px 4px #0000000d,inset 0 1px 0 #fff;transform:rotate(-9deg);transition:transform .45s ease;z-index:2}:where(#overviewView) .ticket-top{display:flex;align-items:center;justify-content:space-between;letter-spacing:1.6px;font-size:9px;color:#77756c}:where(#overviewView) .ticket-top strong{font-size:12px;letter-spacing:0;background:#f7e1cf;color:#935123;border:1px solid #dbb49288;padding:5px 9px;border-radius:6px}:where(#overviewView) .ticket-id{font:12px Menlo,monospace;color:#79796f;margin:22px 0 10px}:where(#overviewView) .ticket-object h2{font-size:24px;line-height:1.4;letter-spacing:-.7px;margin:0;min-height:68px}:where(#overviewView) .ticket-rule{border-top:1px dashed #c6c2b7;margin:20px -26px}:where(#overviewView) .ticket-object dl{margin:0}:where(#overviewView) .ticket-object dl>div{margin-bottom:12px}:where(#overviewView) .ticket-object dt{font-size:10px;color:#77766d;margin-bottom:4px}:where(#overviewView) .ticket-object dd{font-size:12px;margin:0;line-height:1.5}:where(#overviewView) .ticket-bottom{border-top:1px solid #e4e0d8;margin-top:20px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;color:#7f7b72}:where(#overviewView) .barcode{width:66px;height:21px;background:repeating-linear-gradient(90deg,#444 0 1px,transparent 1px 3px,#444 3px 5px,transparent 5px 8px)}:where(#overviewView) .answer-object{position:absolute;right:2%;top:278px;width:270px;min-height:150px;background:#f5fff9;color:#203a2c;border:1px solid #d3e8db;padding:20px 24px;border-radius:18px;box-shadow:0 20px 35px -22px #365b4c88;z-index:3;transform:rotate(-3deg);transition:transform .45s ease}:where(#overviewView) .answer-kicker{font-size:10px;color:#49735c;display:flex;align-items:center;gap:6px}:where(#overviewView) .answer-light{width:6px;height:6px;border-radius:50%;background:#398351}:where(#overviewView) .answer-object>strong{display:block;font-size:28px;letter-spacing:-1px;margin-top:10px}:where(#overviewView) .answer-object>p{font-size:12px;line-height:1.6;margin:8px 0 0;color:#52705c}:where(#overviewView) .story-controls{display:flex;justify-content:center;gap:5px;background:var(--surface,#fff);border:1px solid var(--line,#ddd);border-radius:40px;padding:5px;width:max-content;margin:15px auto 0}:where(#overviewView) .story-controls button{min-height:44px;padding:10px 18px;border:0;background:transparent;border-radius:30px;color:var(--muted);cursor:pointer;font:500 13px inherit}:where(#overviewView) .story-controls button span{font:10px Menlo,monospace;margin-right:6px;opacity:.65}:where(#overviewView) .story-controls button[aria-pressed=true]{background:var(--ink,#1d1d1f);color:var(--page,#fff)}:where(#overviewView) .story-controls button:focus-visible{outline:3px solid #0a57ff;outline-offset:3px}:where(#overviewView) .story-controls button:active{scale:.97}:where(#overviewView) .story-caption{font-size:12px;color:var(--muted);margin:15px auto!important;line-height:1.6}:where(#overviewView) .evidence-stage[data-step=query] .query-object{transform:rotate(0deg) translateY(-12px)}:where(#overviewView) .evidence-stage[data-step=query] .ticket-object{transform:rotate(-12deg) translateX(-18px)}:where(#overviewView) .evidence-stage[data-step=answer] .answer-object{transform:rotate(0deg) translateY(-18px) scale(1.06)}:where(#overviewView) .answer-bars{margin-top:12px}:where(#overviewView) .answer-bar{display:flex;align-items:center;gap:8px;font:10px Menlo,monospace;margin-top:7px}:where(#overviewView) .answer-bar i{height:5px;border-radius:4px;background:#4a9868;display:block}:where(#overviewView) .answer-bar em{font-style:normal;margin-left:auto}:where(#overviewView) .privacy-note{margin-top:20px}:where(#overviewView) .evidence-stage[data-step=answer] .answer-object>strong{font-size:24px}
@media(max-width:700px){:where(#overviewView) .product-intro{padding-top:42px}:where(#overviewView) .intro-copy h1{font-size:43px}:where(#overviewView) .intro-copy>p:not(.family-eyebrow){font-size:14px}:where(#overviewView) .evidence-stage{height:445px;margin-top:14px}:where(#overviewView) .query-object{left:13%;top:25px;width:86%;height:280px;transform:rotate(4deg)}:where(#overviewView) .query-body{padding:23px 20px 20px 64px}:where(#overviewView) .query-body h2{font-size:24px}:where(#overviewView) .query-body pre{font-size:10px}:where(#overviewView) .query-foot{display:none}:where(#overviewView) .query-object header{padding:13px 17px;font-size:8px}:where(#overviewView) .ticket-object{left:1%;top:121px;width:205px;min-height:0;padding:18px;transform:rotate(-7deg)}:where(#overviewView) .ticket-top{font-size:7px;letter-spacing:.8px}:where(#overviewView) .ticket-id{margin:12px 0 6px;font-size:10px}:where(#overviewView) .ticket-object h2{font-size:18px;min-height:50px}:where(#overviewView) .ticket-rule{margin:13px -18px}:where(#overviewView) .ticket-object dl>div{margin-bottom:8px}:where(#overviewView) .ticket-object dd{font-size:10px}:where(#overviewView) .ticket-bottom{margin-top:10px;padding-top:10px;font-size:7px}:where(#overviewView) .barcode{width:44px;height:15px}:where(#overviewView) .answer-object{right:-1%;top:293px;width:165px;padding:15px;min-height:120px}:where(#overviewView) .answer-object>strong{font-size:21px}:where(#overviewView) .answer-object>p{font-size:10px}:where(#overviewView) .answer-kicker{font-size:9px}:where(#overviewView) .evidence-stage[data-step=answer] .answer-object{transform:rotate(0) translateY(-6px)}:where(#overviewView) .evidence-stage[data-step=answer] .answer-object>strong{font-size:20px}:where(#overviewView) .story-controls{margin-top:22px;gap:0}:where(#overviewView) .story-controls button{padding:10px 13px;font-size:12px}:where(#overviewView) .story-caption{font-size:11px}:where(#overviewView) .evidence-stage[data-step=query] .ticket-object{transform:rotate(-8deg) translateX(0)}}
@media(prefers-reduced-motion:reduce){:where(#overviewView) .evidence-stage *{transition:none!important;transform:none!important}:where(#overviewView) .story-controls button:active{scale:1}}

@media(max-width:700px){:where(#overviewView) .query-body{padding-left:43%;padding-right:16px}:where(#overviewView) .query-body h2{font-size:clamp(18px,3.8vw,24px)}:where(#overviewView) .query-body pre{font-size:clamp(8px,1.65vw,10px)}}:where(#overviewView) .stage-floor{inset:12% 0 -4%}:where(#overviewView) .query-body pre{display:block;visibility:visible;opacity:1}:where(#overviewView) .query-body pre code{display:block;background:transparent;color:#dfebff;padding:0}:where(#overviewView) .intro-copy h1 .optical-line{display:inline-block;position:relative;color:var(--accent);white-space:nowrap}:where(#overviewView) .intro-copy h1 .ink{color:var(--ink,#1d1d1f)}:where(#overviewView) .hang-punctuation{display:inline-block;width:0;overflow:visible;text-align:left;color:inherit!important}:where(#overviewView) .optical-copy{display:inline;position:relative}:where(#overviewView) .optical-description{padding-inline:.6em}:where(#overviewView) .object-hit{position:absolute;inset:0;width:100%;height:100%;z-index:5;border:0;border-radius:inherit;background:transparent;cursor:pointer}:where(#overviewView) .object-hit:focus-visible{outline:3px solid var(--accent);outline-offset:5px}:where(#overviewView) .ticket-object:hover{transform:rotate(-6deg) translateY(-7px)}:where(#overviewView) .query-object:hover{transform:rotate(3deg) translateY(-7px)}:where(#overviewView) .answer-object:hover{transform:rotate(-1deg) translateY(-5px)}:where(#overviewView) .object-hit:active{background:#ffffff0c}:where(#overviewView) .story-caption{margin-top:30px!important}.object-dialog{width:min(640px,calc(100% - 32px));max-height:80vh;overflow:auto;border:1px solid var(--line);border-radius:25px;background:var(--surface,#fff);color:var(--ink,#1d1d1f);padding:28px;box-shadow:0 35px 100px #0003;text-align:left}.object-dialog::backdrop{background:#131e344a;backdrop-filter:blur(7px)}.object-dialog-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.object-dialog-head button{width:44px;height:44px;border:0;border-radius:50%;background:var(--page);color:var(--ink);font-size:25px;cursor:pointer}.object-dialog h2{font-size:28px;line-height:1.3;margin:20px 0}.object-dialog p{font-size:15px;line-height:1.8}.dialog-facts{margin:24px 0}.dialog-facts>div{padding:13px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:20px}.dialog-facts dt{color:var(--muted);font-size:13px}.dialog-facts dd{margin:0;font-size:14px;overflow-wrap:anywhere}.object-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--page);padding:18px;border-radius:12px;font:12px/1.8 Menlo,monospace}.dialog-source{color:var(--muted);font-size:11px!important;margin-top:24px}:where(#overviewView) .query-body pre{max-width:100%}:where(#overviewView) .intro-copy h1 .hang-punctuation{color:inherit}:where(#overviewView) .answer-object>strong{font-size:25px}@media(max-width:700px){:where(#overviewView) .intro-copy h1{font-size:clamp(32px,6.8vw,43px)}.object-dialog{padding:21px}.object-dialog h2{font-size:24px}:where(#overviewView) .answer-object>strong{font-size:21px}}@media(prefers-reduced-motion:reduce){:where(#overviewView) .ticket-object:hover,:where(#overviewView) .query-object:hover,:where(#overviewView) .answer-object:hover{transform:none}}.object-dialog[open]::backdrop{animation:dialogBackdropIn 440ms ease both}.object-dialog.is-closing::backdrop{animation:dialogBackdropOut 240ms ease both}@keyframes dialogBackdropIn{from{background:#131e3400;backdrop-filter:blur(0)}to{background:#131e344a;backdrop-filter:blur(7px)}}@keyframes dialogBackdropOut{from{background:#131e344a;backdrop-filter:blur(7px)}to{background:#131e3400;backdrop-filter:blur(0)}}@media(prefers-reduced-motion:reduce){.object-dialog[open]::backdrop,.object-dialog.is-closing::backdrop{animation-duration:80ms}}

/* Keep mobile overview actions content-sized, never fill remaining row width. */
@media(max-width:700px){#overviewView .intro-actions{justify-content:center;gap:10px;flex-wrap:wrap}#overviewView .intro-actions .primary-button{flex:0 0 auto;width:auto;min-height:46px;padding:12px 22px}#overviewView .intro-actions .intro-link{flex:0 0 auto;white-space:nowrap;padding-inline:10px}}

/* Isolate hero SQL excerpt from the query workbench grid, desktop only. */
@media(min-width:701px){#overviewView .query-object .query-body{display:block;min-height:0;grid-template-rows:none}}

/* Mobile relationship diagram: readable labels and downward flow. */
@media(max-width:700px){
 #overviewView .schema-header{min-height:0;padding:8px 0 22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 #overviewView .schema-header h3{max-width:none;font-size:18px;line-height:1.5}
 #overviewView .schema-badge{display:inline-flex;align-items:center;min-height:30px;margin:0;padding:6px 10px;line-height:1.2}
 #overviewView .schema-map{gap:16px;padding:8px 0 20px}
 #overviewView .schema-connector{transform:none;height:auto;min-height:32px;flex-direction:row;gap:10px;flex-shrink:0}
 #overviewView .schema-connector::before,#overviewView .schema-connector::after{content:none}
 #overviewView .schema-connector span{white-space:nowrap;font-size:11px;line-height:1.4}
 #overviewView .schema-connector b{display:inline-block;transform:rotate(90deg);font-size:22px;line-height:1}
 #overviewView .schema-column:not(.schema-outputs){grid-template-columns:1fr}
 #overviewView .schema-column:not(.schema-outputs) .table-node{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:14px 16px}
 #overviewView .table-node code{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:11px}
 #overviewView .schema-column:not(.schema-outputs) .table-node span{flex-shrink:0;font-size:12px}
 #overviewView .schema-outputs .table-node{padding:14px 8px}
 #overviewView .schema-core .table-node code{font-size:22px}
 #overviewView .schema-role{margin-bottom:6px}
}