.topbar{height:auto;min-height:118px;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);grid-template-rows:68px 50px;align-items:center;padding:0 5vw;background:linear-gradient(180deg,rgba(8,18,29,.97),rgba(7,15,24,.96));border-bottom:1px solid #19334a;box-shadow:0 10px 36px #0005}.topbar>.brand{grid-column:1;grid-row:1;justify-self:start;position:relative;padding-right:28px;display:flex;align-items:center}.topbar>.brand:after{content:"";position:absolute;right:8px;top:8px;bottom:8px;width:1px;background:#35506a}.qb-brand-image{display:block;width:264px;height:78px;max-width:100%;object-fit:contain;object-position:left center}.topbar>.profile-pill{grid-column:3;grid-row:1;justify-self:end}.topbar>.topnav{grid-column:1/-1;grid-row:2;justify-self:stretch;display:flex;justify-content:center;align-items:center;gap:12px;width:100%;height:50px;border-top:1px solid #173047;background:rgba(7,17,27,.55);overflow:visible}.nav-link{display:flex;align-items:center;gap:8px;position:relative;color:#9cb0c1;padding:10px 15px 13px;border-radius:0;overflow:visible;isolation:isolate}.nav-link svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;flex:0 0 17px;position:relative;z-index:2}.nav-link>span{position:relative;z-index:2}.nav-link.active{background:transparent;color:#45a7ff}.nav-link.active:after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;background:#208cff;border-radius:3px;box-shadow:0 0 7px #208cff55;z-index:0;pointer-events:none}.qb-language-bar{grid-column:2;grid-row:1;justify-self:center;align-self:stretch;display:flex;gap:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}.qb-language-btn{position:relative;min-width:170px;height:100%;border:0;border-right:1px solid #29455d;background:transparent;color:#aebdca;padding:0 28px 5px;font:600 15px Inter,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:.16s ease;border-radius:0}.qb-language-btn:last-child{border-right:0}.qb-language-btn:hover{background:transparent;color:#fff}.qb-language-btn:after{content:"";position:absolute;left:28px;right:28px;bottom:8px;height:3px;border-radius:3px;background:transparent;box-shadow:none}.qb-language-btn.active{background:transparent;box-shadow:none}.qb-language-btn[data-language="mysql"].active{color:#27aaff}.qb-language-btn[data-language="mysql"].active:after{background:#20a9ff;box-shadow:0 0 10px #20a9ff66}.qb-language-btn[data-language="python"].active{color:#ffd64d}.qb-language-btn[data-language="python"].active:after{background:#ffd64d;box-shadow:0 0 10px #ffd64d55}.qb-language-btn[data-language="java"].active{color:#ff4d4d}.qb-language-btn[data-language="java"].active:after{background:#ff4d4d;box-shadow:0 0 10px #ff4d4d55}.qb-lang-symbol{width:29px;height:29px;display:block;object-fit:contain;flex:0 0 29px}.qb-language-placeholder{display:none;margin:32px auto;max-width:850px;padding:36px;border:1px solid #263746;border-radius:14px;background:#0b141c;text-align:center}.qb-language-placeholder.active{display:block}.qb-language-placeholder h2{font-size:30px;margin:8px 0}.qb-language-placeholder p{color:#91a1ad}.qb-language-placeholder .qb-big-symbol{width:58px;height:58px;object-fit:contain;margin:0 auto 10px;display:block}.qb-lang-hidden{display:none!important}@media(max-width:1100px){.qb-brand-image{width:220px;height:auto}.topbar{grid-template-columns:minmax(210px,1fr) auto minmax(180px,1fr)}.qb-language-btn{min-width:135px;padding:0 16px 5px}.qb-language-btn:after{left:18px;right:18px}}@media(max-width:980px){.topbar{grid-template-columns:1fr auto 1fr;padding:0 3vw}.qb-brand-image{width:190px}.profile-pill div:last-child{display:none}.topnav{overflow-x:auto;justify-content:flex-start!important;padding:0 4px}}@media(max-width:680px){.topbar{grid-template-columns:auto 1fr auto;grid-template-rows:62px 48px;min-height:110px}.topbar>.brand{padding-right:10px}.topbar>.brand:after{display:none}.qb-brand-image{width:128px;height:auto}.qb-language-bar{grid-column:2}.qb-language-btn{min-width:0;width:82px;height:100%;padding:0 6px 4px;font-size:11px}.qb-language-btn:after{left:8px;right:8px;bottom:5px;height:2px}.qb-lang-symbol{width:20px;height:20px;flex-basis:20px}.profile-pill{display:none!important}.topnav{grid-row:2;height:48px}.nav-link{white-space:nowrap;padding:9px 11px 12px;gap:6px}.nav-link svg{width:15px;height:15px}.nav-link.active:after{bottom:0;left:9px;right:9px}}
/* Upcoming language workspaces */
.qb-language-placeholder{--soon:#ffd65a;max-width:1180px;margin:48px auto;padding:48px;text-align:left;overflow:hidden;background:radial-gradient(ellipse at top left,#24445955,transparent 60%),#09131e;border:1px solid #294152;border-radius:18px}
.qb-soon-java{--soon:#fb945e}
.qb-language-placeholder.active{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:48px}
.qb-soon-label{display:block;color:var(--soon);font:11px var(--mono);letter-spacing:.16em;margin-bottom:24px}
.qb-language-placeholder .qb-big-symbol{margin:0 0 18px;width:64px;height:64px}
.qb-language-placeholder h2{font-size:48px;line-height:1.1;letter-spacing:-.04em;margin:0 0 20px}
.qb-language-placeholder h2 span{color:var(--soon)}
.qb-language-placeholder .qb-soon-copy>p{font-size:17px;line-height:1.7;max-width:380px}
.qb-soon-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}.qb-soon-tags span{font-size:11px;color:#afc1ce;border:1px solid #294050;border-radius:5px;padding:6px 9px}
.qb-soon-editor{min-width:0;border:1px solid #314554;border-radius:10px;background:#070f18;box-shadow:0 24px 50px #0005;transform:rotate(1deg)}
.qb-soon-editor-bar{display:flex;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid #213442;font:10px var(--mono);color:#9ab0c0}.qb-soon-dots{color:var(--soon)}.qb-soon-editor-bar>span:last-child{color:#627b8e}
.qb-soon-editor pre{margin:0;padding:26px 22px;overflow:auto;color:#91cef3;font:12px/1.9 var(--mono)}
.qb-soon-terminal{border-top:1px solid #203444;padding:20px;font:11px/1.7 var(--mono);color:#7791a5}.qb-soon-terminal>span{font-size:9px;letter-spacing:.14em}.qb-soon-terminal p{color:var(--soon);font-size:12px}.qb-soon-terminal small{font-size:10px}.qb-soon-cursor{animation:qb-cursor 1.2s step-end infinite}@keyframes qb-cursor{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.qb-soon-cursor{animation:none}}
@media(max-width:850px){.qb-language-placeholder{margin:24px 16px;padding:28px}.qb-language-placeholder.active{grid-template-columns:1fr;gap:28px}.qb-language-placeholder h2{font-size:40px}.qb-soon-editor{transform:none}}

.qb-soon-badge{display:grid;place-items:center;width:64px;height:64px;margin-bottom:20px;border:1px solid #466072;border-radius:14px;background:#142737;color:var(--soon);font:700 24px var(--mono);box-shadow:0 8px 28px #0004}

.qb-soon-badge{white-space:nowrap;font-size:20px}

/* Preserve the original logo pixels while keying out its dark backdrop. */
.topbar>.brand:after{display:none;content:none}.topbar>.brand{padding-right:0}.topbar>.brand>img{filter:url(#qbLogoBackground);clip-path:inset(3px 0);background:transparent}

@media(min-width:681px){.topbar{grid-template-rows:78px 50px;min-height:128px}}

/* Keep lettering at its original size; shrink only the image symbols. */
.topbar>.brand{--brand-width:264px;width:var(--brand-width);max-width:100%;position:relative}
.topbar>.brand>img{width:100%!important;height:auto!important;clip-path:inset(3px 0 3px 31%);transform:translateX(-6%)}
.topbar>.brand::before{content:"";position:absolute;left:0;top:0;bottom:0;width:27%;clip-path:inset(15% 0);background-image:url("querybreak-reference.png");background-repeat:no-repeat;background-position:left center;background-size:calc(var(--brand-width) * .83) auto;filter:url(#qbLogoBackground);pointer-events:none}
.qb-lang-symbol{width:24px;height:24px;flex-basis:24px}
@media(max-width:1100px){.topbar>.brand{--brand-width:220px}}
@media(max-width:980px){.topbar>.brand{--brand-width:190px}}
@media(max-width:680px){.topbar>.brand{--brand-width:128px}.qb-lang-symbol{width:17px;height:17px;flex-basis:17px}}

/* One symbol-only turn every 15 seconds; lettering remains stationary. */
.topbar>.brand::before{transform-origin:60% 50%;animation:qb-symbol-turn 30s ease-in-out 15s infinite}
@keyframes qb-symbol-turn{0%{transform:rotate(0deg)}5%,50%{transform:rotate(360deg)}55%,100%{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.topbar>.brand::before{animation:none}}

/* Lightweight state while language modules initialize; avoid the old promo hero flash. */
.qb-language-placeholder.qb-language-loading{max-width:none;margin:0;padding:32px 5vw;min-height:300px;border:0;border-radius:0;background:transparent}
.qb-language-placeholder.qb-language-loading.active{display:block}
.qb-language-loading p{margin:0;color:#91a1ad;font:13px/1.5 var(--mono,monospace)}