@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f6f5f0;--panel:#fffdfa;--panel2:#eef1eb;--border:#d9ddd6;--text:#20372e;--muted:#65766d;--accent:#315f50;--accent2:#315f50;--easy:#347052;--medium:#98671d;--hard:#b54e42;--mono:'DM Mono',monospace}
body{font-family:Manrope,system-ui,sans-serif}button,input,select{font-family:inherit}button,.chip{transition:background .15s,transform .15s}button:focus-visible,.chip:focus-visible,a:focus-visible,.q-item:focus-visible{outline:3px solid #e86e45;outline-offset:3px}button:disabled{cursor:wait}
#sidebar{width:304px;min-width:304px;background:#18392f;color:#ecf3ee;border-color:#315347}#sidebar-header{padding:24px 20px 18px;border-color:#355347}#sidebar-header h1{font-size:23px;letter-spacing:-1px;margin-bottom:5px}#sidebar-header h1:before{content:'>_';display:inline-grid;place-items:center;background:#c9f16c;color:#18392f;border-radius:9px;width:36px;height:36px;margin-right:10px;font:600 17px var(--mono)}.brand-sub{font-size:9px;letter-spacing:2px;color:#a2bbae;margin:10px 0 20px}#progress-summary{color:#b6cabe;font-size:11px;line-height:1.7}.progress-bar{background:#315347}#filters{border-color:#355347;padding:16px 18px}#search,select#topic-filter{background:#123028;border-color:#426154;color:#ecf3ee}#search::placeholder{color:#a5b9af}#sidebar .chip{color:#b9cbbf;background:transparent;border-color:#476658}#sidebar .chip.active{background:#c9f16c;color:#18392f;border-color:#c9f16c}#q-list{padding:8px;scrollbar-width:thin;scrollbar-color:#547465 #18392f}.q-item{padding:13px 11px;border:0;border-radius:8px;margin:2px 0;color:#d2dfd7}.q-item:hover{background:#254b3d}.q-item.active{background:#f6f5f0;color:#20372e;border:0}.q-check{border-color:#5b7b6a}.q-check.done{background:#c9f16c;border-color:#c9f16c}.q-text{font-size:12px}.q-num{color:#96ab9f}.q-meta .badge{font-size:9px}.q-item .badge.topic{color:#b5cec0;background:#2b5242}.q-item.active .badge.topic{background:#e1ebe2;color:#315f50}.q-item .badge.Easy{color:#9cd5ac}.q-item .badge.Medium{color:#e2c17d}.q-item.active .badge.Easy{color:#347052}.q-item.active .badge.Medium{color:#98671d}.qr-nav{display:grid;gap:4px;padding:16px 14px 0}.qr-nav button{background:transparent;color:#b9cbbf;border:0;border-radius:7px;padding:10px 12px;text-align:left;font-size:12px}.qr-nav button.active{background:#2b4d40;color:#c9f16c}.qr-footer{padding:16px 20px;border-top:1px solid #355347;font-size:11px;color:#b9cbbf}.qr-footer small{display:block;margin-top:5px;color:#90ad9c}
#main{min-width:0}#topbar{min-height:66px;padding:14px 24px;background:#fffdfa;gap:10px}#topbar .title{font-size:12px}#topbar button{font-size:11px;background:#fffdfa}#content{padding:30px 30px 60px;width:100%;max-width:none}.q-title{font-size:27px;letter-spacing:-.7px;line-height:1.35;margin:16px 0 20px}.ws-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}.ws-ref{border-radius:10px;box-shadow:0 7px 24px #1e342b05}.ref-pinned{font-size:12px}.ref-head{padding:14px 12px}section.block{box-shadow:0 6px 24px #1e342b06;padding:18px;border-radius:11px}section.block h3{font-size:10px;letter-spacing:1.4px}table.sample th{background:#eef1eb;color:#315f50}table.sample tr:nth-child(even) td{background:#f3f5ef}table.sample td,table.sample th{padding:9px;font-size:11px}.tables-row code{color:#315f50}.editor-highlight{background:#122a23;color:#d9e5df;border-color:#234139}.editor-wrap:before{content:'●  ●  ●                         solution.sql · SQLite';display:block;padding:12px 14px;border:1px solid #d9ddd6;border-radius:7px 7px 0 0;background:#eef1eb;color:#62766a;font:10px var(--mono)}#editor,.editor-highlight{min-height:240px;border-radius:0 0 6px 6px;padding:18px;font-size:13px;line-height:1.8}.tok-keyword{color:#c9f16c}.tok-function{color:#e7b982}.tok-string{color:#e7ac91}.tok-number{color:#9dd1bc}.tok-comment{color:#8ca99c}.tok-operator{color:#d9e5df}button.run{background:#d9e5dd;color:#18392f;border:1px solid #cbd9d0}button.verify{background:#c9f16c;color:#18392f;border:1px solid #b8df60}button.solution{background:#18392f;color:#fff}.result-msg.ok{color:#2d684b;background:#eaf4e9}.result-msg.error{color:#a83f35;background:#fff0ed}.result-msg.fail{color:#906315;background:#fff4dd}.result-msg.info{color:#315f50;background:#e9f0e8}.hint-box{background:#fff7e7;color:#776038;border-color:#e8dbb7}.sql-block{background:#122a23!important;color:#d9e5df!important}.explain-box{background:#f3f5ef;color:#315044}.schema-table .tname{color:#315f50}
.qr-landing{max-width:1100px;margin:0 auto}.qr-kicker{font:10px var(--mono);letter-spacing:2px;text-transform:uppercase;color:#647a6b}.qr-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:38px;align-items:center;padding:28px 0 36px}.qr-hero h2{font-size:clamp(36px,4.6vw,64px);line-height:1.07;letter-spacing:-3px;margin:18px 0 22px;font-weight:800}.qr-hero h2 em{font-style:normal;color:#5d7851}.qr-hero p{font-size:14px;line-height:1.9;color:#647269;max-width:490px}.qr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.qr-primary,.qr-secondary{border:1px solid #18392f;border-radius:8px;padding:13px 20px;font:600 12px Manrope;cursor:pointer}.qr-primary{background:#18392f;color:#fff}.qr-secondary{background:transparent;color:#18392f}.qr-note{font-size:11px!important}.qr-demo{background:#122a23;color:#d9e5df;border-radius:14px;box-shadow:0 24px 45px #18392f20;overflow:hidden;transform:rotate(1deg)}.qr-demo-header{padding:16px;color:#9cb8a7;border-bottom:1px solid #355347;font:10px var(--mono)}.qr-demo pre{padding:20px;font:12px/2 var(--mono);overflow:auto;margin:0}.qr-demo pre b{color:#c9f16c;font-weight:400}.qr-demo-result{background:#fffdfa;color:#315f50;margin:0 16px 16px;padding:14px;border-radius:7px;font:11px/2 var(--mono)}.qr-demo-result span{float:right}.qr-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d9ddd6;border-bottom:1px solid #d9ddd6;padding:20px 0;gap:20px}.qr-stats strong{display:block;font:500 26px var(--mono);letter-spacing:-1px}.qr-stats span{font-size:11px;color:#647269}.qr-section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}.qr-section-title h3{font-size:20px;letter-spacing:-.6px;margin:0}.qr-section-title span{font:10px var(--mono);color:#647269}.qr-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.qr-feature{padding:22px;background:#fffdfa;border:1px solid #d9ddd6;border-radius:10px}.qr-feature .feature-icon{color:#b85b37;background:#fae8dd;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;font:500 14px var(--mono)}.qr-feature h4{font-size:13px;margin:15px 0 8px}.qr-feature p,.qr-story p{font-size:12px;color:#647269;line-height:1.85;margin:0}.qr-story{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0;padding:26px;background:#e8ede3;border-radius:12px}.qr-story h3{font-size:18px;letter-spacing:-.4px;margin:8px 0 12px}.qr-story button{margin-top:16px}.qr-credit{font-size:10px;color:#647269;line-height:1.8;padding-bottom:20px}.qr-credit a{color:#315f50}#sidebar .loading{color:#b9cbbf}
@media(max-width:1200px){.ws-grid{grid-template-columns:minmax(0,1fr) 280px}#sidebar{width:270px;min-width:270px}#content{padding:24px 20px}.qr-hero{gap:22px}.qr-hero h2{letter-spacing:-2px}.qr-demo pre{font-size:10px}}
@media(max-width:1000px){.ws-grid{grid-template-columns:1fr}.ws-ref{position:static;max-height:none}.ref-body{max-height:420px}.qr-hero{grid-template-columns:1fr}.qr-demo{transform:none}.qr-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){#sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:290px;min-width:0;box-shadow:10px 0 50px #122a2350}#sidebar.collapsed{display:none}#topbar{flex-wrap:wrap;padding:10px 14px}#topbar .title{font-size:10px}#topbar button{padding:7px 9px}#content{padding:24px 16px 50px}.qr-hero{padding-top:12px}.qr-hero h2{font-size:44px}.qr-stats{gap:10px}.qr-stats strong{font-size:22px}.qr-features,.qr-story{grid-template-columns:1fr}.qr-section-title{align-items:start;gap:12px;flex-direction:column}.q-title{font-size:23px}.qr-story{padding:20px}.qr-demo pre{font-size:11px}.btn-row button{padding:10px}.qr-actions{gap:8px}}
#sidebar-header{padding:16px 18px 12px;flex-shrink:0}.brand-sub{margin:9px 0 0;font-size:8px}#progress-summary{font-size:10px;line-height:1.5;margin:12px 0 8px}.qr-nav{padding:10px 12px 0;gap:2px;flex-shrink:0}.qr-nav button{padding:8px 10px;font-size:11px}#filters{padding:12px 16px;gap:6px;flex-shrink:0}#search{font-size:11px;padding:7px}select#topic-filter{font-size:11px}#q-list{min-height:70px;flex:1 1 0}.qr-footer{padding:12px 18px;flex-shrink:0}.qr-footer small{font-size:9px}.editor-wrap:before{position:relative}.ws-main .editor-wrap{padding-top:0}
.editor-wrap:before{display:none}#editor,.editor-highlight{border-radius:7px}.ws-main section.block:has(.editor-wrap)>h3{margin:-18px -18px 0;padding:13px 18px;border-bottom:1px solid #d9ddd6;background:#eef1eb;border-radius:10px 10px 0 0;color:#62766a}.ws-main .editor-wrap{margin-top:0}.qr-footer small{line-height:1.6}
@media(max-height:760px){#sidebar-header{padding:12px 16px 8px}#sidebar-header h1{font-size:20px}.brand-sub{display:none}.qr-nav{grid-template-columns:1fr 1fr;padding-top:8px}.qr-nav button{font-size:10px;padding:8px}#filters{padding:10px 16px}.qr-footer{padding:9px 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* landing demo: the hero query types, runs and returns its real rows */
.qr-typed{min-height:226px}.qr-typed b{color:#c9f16c;font-weight:400}
.qr-caret{display:inline-block;width:7px;height:14px;margin-left:1px;background:#c9f16c;vertical-align:-2px;animation:qr-blink .8s steps(1) infinite}
@keyframes qr-blink{50%{opacity:0}}
.qr-runbar{display:flex;align-items:center;gap:12px;padding:0 20px 14px;font:11px var(--mono);color:#9cb8a7}
.qr-run{padding:6px 12px;border-radius:7px;background:#c9f16c;color:#122a23;font-weight:700;transition:transform 140ms cubic-bezier(.23,1,.32,1),box-shadow 140ms ease;box-shadow:0 3px 0 #7d9f2f}
.qr-run.press{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 #7d9f2f}
.qr-runinfo b{color:#c9f16c}
.qr-res{margin:0 16px 16px;border-radius:8px;background:#fffdfa;color:#24453b;font:11.5px var(--mono);min-height:242px;overflow:hidden}
.qr-res-head,.qr-res-row{display:flex;justify-content:space-between;padding:6px 14px}
.qr-res-head{color:#647269;border-bottom:1px solid #d9ddd6;font-size:10px;letter-spacing:.5px}
.qr-res-row{border-bottom:1px dashed #e3e6df;animation:qr-row 240ms cubic-bezier(.23,1,.32,1) both}
.qr-res-row.null span:first-child{color:#b85b37;font-weight:700}
.qr-res-row em{font-style:normal;font-weight:400;margin-left:8px;padding:1px 6px;border-radius:4px;background:#fae8dd;color:#b85b37;font-size:10px}
@keyframes qr-row{from{opacity:0;transform:translateY(6px)}}
.qr-demo{transition:opacity 400ms ease}.qr-demo.reset{opacity:.4}
.qr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qr-primary,.qr-secondary{transition:transform 140ms cubic-bezier(.23,1,.32,1),background 160ms ease}.qr-primary:active,.qr-secondary:active{transform:scale(.97)}