.sql-page h1{max-width:1100px;font-size:clamp(48px,7vw,88px)}.sql-page .seo-hero{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr)}.sql-page .hero-example{transform:rotate(.55deg)}.sql-page .hero-example pre{min-height:260px}.sql-app{--sql-deep:#172431;--sql-ink:#293b49;--sql-muted:#5b6d79;--sql-line:#2b4d5b2b;--sql-teal:#087f78;--sql-teal-dark:#055d59;--sql-teal-pale:#e5f8f5;--sql-coral:#ad4f2e;color:var(--sql-ink);box-shadow:var(--shadow,0 24px 70px #074e601f);background:#fffffffa;border:1px solid #ffffffe0;border-radius:30px;overflow:hidden}.sql-app *,.sql-app :before,.sql-app :after{box-sizing:border-box}.sql-app button,.sql-app input,.sql-app select,.sql-app textarea{font:inherit}.sql-app textarea{font-family:SFMono-Regular,Cascadia Code,Fira Code,DejaVu Sans Mono,Consolas,monospace}.sql-app-bar,.sql-controls-heading,.sql-editor-card>header,.sql-actions,.sql-activity{justify-content:space-between;align-items:center;gap:14px;display:flex}.sql-app-bar{border-bottom:1px solid var(--sql-line);background:linear-gradient(90deg,#edfdf8,#f5fbff 55%,#fff7ee);min-height:68px;padding:13px 18px}.sql-app-bar>a{border:1px solid var(--sql-line);color:var(--sql-teal-dark);background:#fff;border-radius:999px;flex:none;padding:8px 12px;font-size:12px;font-weight:900}.sql-local-badge{align-items:center;gap:11px;min-width:0;display:flex}.sql-local-badge>span{background:var(--sql-teal);border-radius:50%;flex:none;width:10px;height:10px;box-shadow:0 0 0 4px #087f7821}.sql-local-badge>div{gap:2px;min-width:0;display:grid}.sql-local-badge strong{color:var(--sql-deep);font-size:12px}.sql-local-badge small{color:var(--sql-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.sql-controls{border-bottom:1px solid var(--sql-line);background:linear-gradient(#fffdf9,#fff);gap:16px;padding:20px;display:grid}.sql-controls-heading>div,.sql-editor-card>header>div{gap:2px;display:grid}.sql-controls-heading p,.sql-editor-card>header p{color:var(--sql-coral);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:12px;font-weight:900}.sql-controls-heading h2,.sql-editor-card>header h3{color:var(--sql-deep);margin:0;font-size:18px;line-height:1.2}.sql-controls-heading>span,.sql-editor-card>header>span{color:var(--sql-muted);font-size:12px;font-weight:800}.sql-control-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.sql-control-grid label{gap:6px;display:grid}.sql-control-grid label>span{color:var(--sql-muted);font-size:12px;font-weight:800}.sql-control-grid select{border:1px solid var(--sql-line);width:100%;min-height:42px;color:var(--sql-deep);background:#fff;border-radius:11px;padding:8px 34px 8px 11px;font-size:13px;font-weight:750}.sql-control-grid select:focus-visible,.sql-app textarea:focus-visible,.sql-app button:focus-visible,.sql-app a:focus-visible{outline-offset:2px;outline:3px solid #087f7838}.sql-dialect-note{color:var(--sql-muted);margin:-2px 0 0;font-size:12px;line-height:1.5}.sql-dialect-note strong{color:var(--sql-teal-dark)}.sql-switches{flex-wrap:wrap;gap:9px 18px;display:flex}.sql-switches label{color:var(--sql-ink);align-items:center;gap:7px;font-size:12px;font-weight:750;display:flex}.sql-switches input{width:17px;height:17px;accent-color:var(--sql-teal)}.sql-editors{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.sql-editor-card{background:#fff;grid-template-rows:auto minmax(330px,1fr) auto;gap:12px;min-width:0;padding:20px;display:grid}.sql-editor-card+.sql-editor-card{border-left:1px solid var(--sql-line)}.sql-editor-card.output{background:linear-gradient(#f8fffd,#fff 54%)}.sql-editor-card textarea{resize:vertical;border:1px solid var(--sql-line);color:#253746;tab-size:2;background:#fbfcfd;border-radius:15px;width:100%;min-height:330px;padding:16px;font-size:13px;line-height:1.62}.sql-editor-card.output textarea{background:#f4fbf9}.sql-editor-card textarea::placeholder{color:#82929b}.sql-actions{flex-wrap:wrap;justify-content:flex-start}.sql-button{border:1px solid var(--sql-line);min-height:40px;color:var(--sql-teal-dark);cursor:pointer;background:#fff;border-radius:11px;padding:9px 14px;font-size:12px;font-weight:900}.sql-button.primary{border-color:var(--sql-teal);color:#fff;background:linear-gradient(135deg, var(--sql-teal), #0a686c);box-shadow:0 8px 22px #087f782e}.sql-button.quiet{color:var(--sql-muted);background:0 0}.sql-button:hover:not(:disabled){transform:translateY(-1px)}.sql-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.sql-error{color:#8d342e;background:#fff1ef;border-top:1px solid #b441362e;border-bottom:1px solid #b441362e;margin:0;padding:13px 20px;font-size:12px;line-height:1.55}.sql-disclaimer{border-top:1px solid var(--sql-line);color:#6f5b2e;background:#fff9e9;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:15px 20px;font-size:12px;line-height:1.55;display:grid}.sql-disclaimer strong{color:#614715}.sql-activity{border-top:1px solid var(--sql-line);min-height:58px;color:var(--sql-muted);background:#fbfdfd;margin:0;padding:13px 20px;font-size:12px}.sql-activity strong{color:var(--sql-teal-dark);letter-spacing:.11em;text-transform:uppercase;flex:none;font-size:12px}.sql-activity span{text-align:right;min-width:0}@media (width<=900px){.sql-page .seo-hero{grid-template-columns:1fr}.sql-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sql-editors{grid-template-columns:1fr}.sql-editor-card+.sql-editor-card{border-top:1px solid var(--sql-line);border-left:0}}@media (width<=620px){.sql-app{border-radius:20px}.sql-app-bar,.sql-controls-heading,.sql-editor-card>header,.sql-activity{flex-direction:column;align-items:flex-start}.sql-app-bar>a{align-self:flex-start}.sql-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sql-control-grid label:first-child{grid-column:1/-1}.sql-control-grid select{min-height:44px}.sql-controls,.sql-editor-card{padding:16px}.sql-editor-card{grid-template-rows:auto minmax(290px,1fr) auto}.sql-editor-card textarea{min-height:290px;font-size:12px}.sql-disclaimer{grid-template-columns:1fr}.sql-activity span{text-align:left}.sql-switches{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.sql-switches label{border:1px solid var(--sql-line);background:#fff;border-radius:11px;min-height:44px;padding:10px}.sql-switches input{width:20px;height:20px}.sql-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.sql-button{min-height:44px}}@media (prefers-reduced-motion:reduce){.sql-button{transition:none}}