:root{--bg:#f7f8fc;--surface:#fff;--surface-2:#f7f8fc;--ink:#263046;--ink2:#36415a;--muted:#5f697e;--line:#e9ecf4;--violet:#7653e3;--violet2:#a99af3;--violet-pale:#f1edff;--teal:#20ad9e;--orange:#eb9f62;--shadow:0 6px 30px rgba(45,49,97,.035);--chart-bg:#fff;--chart-ink:#46536d;--chart-muted:#8996a9;--chart-grid:#e8ecf4;--chart-axis:#d9dfec;--chart-soft:#f4f0ff;--radius:17px;--font:'Segoe UI',system-ui,-apple-system,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);margin:0;font:15.6px/1.55 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{text-decoration:none;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a99af3;outline-offset:2px}.symbols{position:absolute;overflow:hidden;width:0;height:0}.hidden{display:none!important}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.app-shell{display:flex;min-height:100vh}.rail{width:282px;background:#171a2a;color:#e8ebf7;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:30}.brand-row{height:91px;padding:25px 22px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #ffffff0c}.brand-glyph{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#7653e3;color:#fff;font-size:23.4px;font-weight:700;box-shadow:none}.brand-glyph span{color:#b9ffdf}.brand-name{font-size:22.3px;line-height:1;font-weight:700;letter-spacing:-.075em}.brand-name span{font-weight:550;color:#c5b5ff;letter-spacing:-.045em}.brand-name small{display:block;color:#7d839d;font-size:11.2px;font-weight:650;letter-spacing:.13em;margin-top:9px}.rail-close{display:none}.rail-group{padding:24px 12px 9px}.rail-caption,.rail-section-title,.section-kicker{font-size:11.2px;letter-spacing:.13em;font-weight:700;color:#9095b1}.rail-caption{margin:0 11px 12px}.rail-link{width:100%;height:44px;background:transparent;border:0;color:#a5adc6;display:flex;align-items:center;gap:11px;text-align:left;border-radius:10px;padding:0 13px;margin:3px 0;font-weight:650;font-size:13.4px;transition:background .15s,color .15s}.rail-link svg{width:17px;height:17px}.rail-link:hover{background:#252a40;color:#f5f6ff}.rail-link.active{background:#6e53d92a;color:#ddcffd}.rail-link.active svg{color:#b9a6ff}.rail-count,.rail-new{margin-left:auto;background:#34364a;border-radius:5px;padding:2px 7px;font-size:11.2px;color:#a9b0c8;font-weight:650}.rail-new{background:#233f3b;color:#77e0b7;font-size:10px;text-transform:uppercase}.rail-divider{margin:14px 24px 0;height:1px;background:#303349}.rail-lessons{padding-top:20px;min-height:0;display:flex;flex:1;flex-direction:column}.rail-section-title{display:flex;justify-content:space-between;align-items:center;margin:0 12px 10px}.rail-section-title strong{color:#d1c4ff;letter-spacing:0;font-size:11.2px}.rail-progress{height:5px;background:#36364d;border-radius:4px;margin:0 12px 11px;overflow:hidden}.rail-progress div{background:linear-gradient(90deg,#7c5df3,#68cbb8);height:100%;width:0;transition:width .25s}.mission-list{overflow:auto;padding-bottom:12px;scrollbar-color:#47455f transparent;scrollbar-width:thin}.mission-stage{color:#737b99;font-weight:650;font-size:11.2px;text-transform:uppercase;letter-spacing:.08em;margin:19px 10px 7px}.mission-link{border:0;background:transparent;display:flex;align-items:center;text-align:left;width:100%;color:#939db8;padding:9px 9px;gap:10px;border-radius:10px;margin:1px 0}.mission-link:hover{background:#222738;color:#fff}.mission-link.selected{background:#32284e;color:#f5efff}.mission-index{width:29px;height:29px;border:1px solid #383d51;border-radius:8px;display:grid;place-items:center;font:700 11.2px ui-monospace,SFMono-Regular,monospace;color:#7f87a6}.mission-link.selected .mission-index{background:#8064e7;border-color:#8064e7;color:#fff}.mission-link.done .mission-index{background:#20463c;color:#80dfc4;border-color:#20463c}.mission-copy{min-width:0}.mission-copy strong{display:block;font-weight:640;font-size:12.3px;line-height:1.35}.mission-copy small{display:block;margin-top:3px;color:#686f8b;font-size:11.2px}.rail-bottom{padding:12px 15px 20px;margin-top:auto;background:#171a2a;border-top:1px solid #ffffff12}.rail-tip{display:flex;gap:9px;padding:11px 10px;background:#23263b;border:1px solid #35344f;border-radius:11px}.tip-icon{width:23px;color:#c5afff;font-size:19px}.rail-tip p{margin:0;color:#8d97b2;font-size:11.2px;line-height:1.5}.rail-tip b{color:#d7d4f3}.rail-course{display:flex;align-items:center;justify-content:space-between;color:#d2c9fd;font-size:12.3px;font-weight:650;padding:16px 6px 0}.rail-course svg{width:14px}.rail-course:hover{color:#fff}
.main-shell{flex:1;min-width:0}.masthead{height:73px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 clamp(20px,3.2vw,52px);display:flex;align-items:center;justify-content:space-between;gap:20px}.mast-left,.mast-right{display:flex;align-items:center;gap:15px}.mast-right{gap:17px}.breadcrumbs{font-size:12.3px;font-weight:700;color:var(--muted);letter-spacing:.08em}.breadcrumbs span{color:#c4c8d4;padding:0 9px}.breadcrumbs strong{color:var(--ink2)}.engine-state{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:25px;background:var(--surface-2);color:var(--muted);padding:7px 12px;font-weight:660;font-size:12.3px;white-space:nowrap}.status-pulse{width:7px;height:7px;border-radius:50%;background:#e4b76d;box-shadow:0 0 0 3px #e4b76d26}.engine-state.ready .status-pulse{background:#35b99b;box-shadow:0 0 0 3px #35b99b1b}.engine-state.ready{color:var(--teal)}.engine-state.error .status-pulse{background:#e86e73}.engine-state.error{color:#d26876}.icon-btn{border:0;background:transparent;color:var(--muted);width:34px;height:34px;display:grid;place-items:center;border-radius:9px}.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.mast-stepik{color:var(--violet);font-size:13.4px;font-weight:650;display:flex;align-items:center;gap:9px;white-space:nowrap}.mast-stepik svg{width:14px}.nav-open{display:none}.content-area{max-width:1660px;margin:auto;padding:32px clamp(20px,3.2vw,52px) 25px}.welcome{height:208px;border-radius:22px;background:linear-gradient(105deg,#f0e9ff,#f2efff 45%,#eafaf5 100%);display:flex;overflow:hidden;position:relative;justify-content:space-between;align-items:center;padding:26px 36px 26px 33px;border:1px solid #eae6fa}.welcome-copy{position:relative;z-index:2}.welcome-eyebrow{font-size:11.2px;color:#8b65ca;font-weight:700;letter-spacing:.14em;display:flex;gap:8px;align-items:center}.eyebrow-orb{width:7px;height:7px;background:#8c6ce5;border-radius:50%;box-shadow:0 0 0 4px #8c6ce523}.welcome h2{font-size:clamp(26.8px,3.2vw,43.5px);letter-spacing:-.065em;line-height:1.1;margin:11px 0 10px;font-weight:700;color:#292640}.welcome h2 em{font-style:normal;color:#7755dc}.welcome p{color:#77768e;font-size:13.4px;line-height:1.6;margin:0;max-width:545px}.welcome-pills{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}.welcome-pills span{background:#ffffffad;border:1px solid #ffffffc0;color:#695e85;padding:5px 9px;border-radius:15px;font-size:11.2px;font-weight:650;display:flex;align-items:center;gap:5px}.welcome-pills svg{width:13px;height:13px;color:#856bd7}.welcome-visual{position:relative;height:100%;width:340px;flex:none}.graph-grid{position:absolute;inset:-60px -80px;background:linear-gradient(#9f8ce00f 1px,transparent 1px),linear-gradient(90deg,#9f8ce00f 1px,transparent 1px);background-size:27px 27px;transform:rotate(-12deg)}.visual-card{position:absolute;top:4px;right:35px;background:#ffffffd9;border:1px solid #fff;border-radius:16px;padding:16px 17px 6px;width:275px;height:172px;box-shadow:0 16px 37px #7d6ab41f;transform:rotate(-4deg)}.visual-overline{font-size:11.2px;letter-spacing:.12em;color:#978da6;font-weight:650;display:flex;justify-content:space-between}.visual-overline span{color:#d0c6e2}.visual-value{font-size:32.4px;letter-spacing:-.05em;color:#352b52;font-weight:700;margin-top:8px;line-height:1}.visual-value small{font-size:16.7px;color:#29b89a}.visual-sub{font-size:11.2px;color:#9b96a5}.visual-card svg{width:100%;height:74px;margin-top:-1px;stroke:none}.float-chip{position:absolute;z-index:2;bottom:14px;right:3px;transform:rotate(6deg);border-radius:8px;background:#29233c;color:#e6dff7;padding:9px 12px;font-size:11.2px;box-shadow:0 13px 28px #34305b3b;font-weight:650;letter-spacing:.045em}.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}.metric{display:flex;align-items:center;gap:13px;padding:15px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.metric-icon{width:41px;height:41px;border-radius:12px;display:grid;place-items:center}.metric-icon.purple{background:#f0ebff;color:#8d6ce7}.metric-icon.blue{background:#e8f4fd;color:#5499d5}.metric-icon.peach{background:#fff1e7;color:#de945b}.metric small{font-size:11.2px;color:var(--muted);display:block;font-weight:660}.metric strong{display:block;font-size:21.2px;letter-spacing:-.04em;font-weight:700;line-height:1.3}.metric strong span{font-size:13.4px;color:var(--muted);font-weight:560;letter-spacing:0}
.work-layout{display:grid;grid-template-columns:minmax(440px,1fr) 280px;gap:19px;align-items:start}.work-column{display:flex;flex-direction:column;gap:17px;min-width:0}.task-card,.query-panel,.results-panel,.inspector,.dashboard-page{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.task-card{padding:20px 23px 15px;position:relative;overflow:hidden}.task-top,.task-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-kicker{color:var(--muted);font-size:12px;font-weight:700}.task-difficulty{font-size:11.2px;font-weight:700;color:#8b70e3;background:var(--violet-pale);padding:4px 9px;border-radius:14px}.task-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.task-card h2{font-size:21.2px;letter-spacing:-.04em;margin:11px 0 7px;line-height:1.3}.task-card p{margin:0;color:var(--muted);font-size:13.4px;line-height:1.65;max-width:850px}.task-illustration{font-size:53.6px;line-height:1;color:#e5dcff;user-select:none;font-weight:700}.task-bottom{margin-top:17px;padding-top:12px;border-top:1px solid var(--line)}.task-bottom span{font-size:11.2px;color:var(--muted)}.link-btn,.quiet-link{color:var(--violet);background:transparent;border:0;padding:4px 0;display:inline-flex;align-items:center;gap:4px;font-size:12.3px;font-weight:650}.link-btn svg{width:12px;height:12px}.link-btn:hover,.quiet-link:hover{text-decoration:underline}
.query-panel{overflow:visible}.panel-toolbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid var(--line);gap:15px}.panel-title,.panel-small-actions{display:flex;align-items:center;gap:10px}.square-mark{display:grid;place-items:center;background:#252a3d;color:#ccbbff;border-radius:7px;font:800 11.2px ui-monospace,SFMono-Regular,monospace;width:29px;height:28px}.panel-title h3{font-size:14.5px;margin:0;letter-spacing:-.01em}.panel-desc{font-size:11.2px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:3px 7px;white-space:nowrap}.keyboard-hint{font-size:11.2px;color:#a5acba;white-space:nowrap}.mini-button{border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);width:29px;height:29px;font-weight:700}.mini-button:hover{background:var(--violet-pale);color:var(--violet)}.editor-wrap{padding:0;background:var(--surface)}.CodeMirror{height:235px!important;font:14.5px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace!important;background:var(--surface)!important;color:var(--ink2)!important}.CodeMirror-gutters{background:var(--surface-2)!important;border-right:1px solid var(--line)!important}.CodeMirror-linenumber{color:#b7bdc9!important;padding-right:12px!important}.CodeMirror-lines{padding:15px 0!important}.CodeMirror-cursor{border-left:2px solid #7a60df!important}.CodeMirror-selected{background:#e7e0ff!important}.cm-s-default .cm-keyword{color:#8360d7;font-weight:650}.cm-s-default .cm-string{color:#c8803f}.cm-s-default .cm-number{color:#23a892}.cm-s-default .cm-comment{color:#a8b1c1}.cm-s-default .cm-variable,.cm-s-default .cm-variable-2{color:#536681}.cm-s-default .cm-operator{color:#8a79a1}.CodeMirror-hints{z-index:99!important;border:1px solid var(--line)!important;box-shadow:0 12px 36px #1b193c24!important;border-radius:10px!important;overflow:hidden}.CodeMirror-hint-active{background:#f0edff!important;color:#6655cb!important}.query-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 15px;gap:12px}.example-wrap{position:relative}.example-trigger{border:0;background:transparent;color:var(--muted);font-size:12.3px;font-weight:650;padding:7px 4px}.example-trigger:hover{color:var(--violet)}.example-trigger span{margin-left:5px}.examples-pop{z-index:19;position:absolute;top:37px;left:0;min-width:220px;background:var(--surface);border:1px solid var(--line);box-shadow:0 13px 33px #1d20313a;border-radius:12px;padding:7px}.example-item{display:block;border:0;background:transparent;width:100%;padding:10px;border-radius:7px;text-align:left;font-size:12.3px;color:var(--ink2)}.example-item:hover{background:var(--violet-pale);color:var(--violet)}.run-actions{display:flex;gap:9px}.button-primary,.button-outline,.button-secondary,.button-ghost{border-radius:9px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12.3px;font-weight:700;white-space:nowrap}.button-primary{background:#7555e6;color:#fff;border:1px solid #7555e6;box-shadow:0 3px 9px #6c55d12e}.button-primary:hover{background:#6244cf}.button-primary svg,.button-secondary svg,.button-ghost svg{width:14px;height:14px}.run-arrow{color:#c6b9ff;margin-left:6px}.button-outline{background:var(--surface);color:var(--violet);border:1px solid #d5ccfa}.button-outline:hover{background:var(--violet-pale)}.button-secondary{background:#eae4ff;color:#6a4acb;border:1px solid #e2d9ff}.button-secondary:hover{background:#dfd5ff}.button-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.results-panel{overflow:hidden}.results-head{padding:16px 19px;display:flex;align-items:center;justify-content:space-between;gap:12px}.results-head-left,.results-tools{display:flex;align-items:center;gap:12px}.results-head h3{margin:0;font-size:15.6px;letter-spacing:-.025em}.results-status{font-size:11.2px;color:var(--teal);font-weight:650;background:#eafaf5;border-radius:15px;padding:5px 9px;white-space:nowrap}.results-tools{gap:11px}.icon-text{border:0;background:transparent;display:flex;align-items:center;gap:6px;font-size:12.3px;color:var(--muted);font-weight:650;padding:4px}.icon-text svg{width:14px;height:14px}.icon-text:hover{color:var(--violet)}.results-tab-row{padding:0 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:10px}.results-tabs{display:flex;gap:20px}.result-tab{display:flex;align-items:center;gap:7px;background:none;border:0;position:relative;color:var(--muted);padding:12px 0;font-size:12.3px;font-weight:650}.result-tab svg{width:15px;height:15px}.result-tab.active{color:var(--violet)}.result-tab.active:after{content:'';position:absolute;bottom:0;left:0;right:0;background:var(--violet);height:2px;border-radius:3px}.new-feature{background:#def7ef;color:#2da789;padding:1px 5px;border-radius:4px;font-size:8.9px;font-weight:700;letter-spacing:.035em}.result-caption{font-size:11.2px;color:#a1abb9;white-space:nowrap}.table-region{min-height:152px;max-height:325px;overflow:auto;scrollbar-color:#e1dced transparent}.results-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:175px;padding:25px;color:var(--ink2);text-align:center}.results-empty b{font-size:13.4px}.results-empty p{font-size:12.3px;color:var(--muted);margin:0}.empty-squiggle{width:40px;height:40px;border-radius:12px;background:#f2edff;color:#8b72e6;display:grid;place-items:center;font:800 19px ui-monospace,SFMono-Regular,monospace;margin-bottom:3px}.table-scroll{overflow:auto;max-height:320px}.data-table{border-collapse:collapse;min-width:100%;font:12.3px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.data-table th{background:var(--surface-2);font:730 12.3px var(--font);text-align:left;color:#7f8aa3;padding:12px 16px;position:sticky;top:0;border-right:1px solid var(--line)}.data-table td{padding:10px 16px;color:var(--ink2);border-top:1px solid var(--line);border-right:1px solid var(--line)}.data-table tr:nth-child(2n){background:#fbfbfd}.data-table tr:hover{background:#f4f0ff}.data-table .data-null{color:#aab2c4;font-style:italic}.truncation-note{padding:9px 14px;font-size:12.3px;color:var(--muted)}.results-foot{padding:12px 19px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.results-foot span{font-size:11.2px;color:var(--muted);display:flex;align-items:center;gap:5px}.results-foot span svg{width:12px;height:12px}.foot-button{border:0;background:none;color:var(--muted);font-size:11.2px;display:flex;gap:5px;align-items:center}.foot-button svg{width:12px;height:12px}.foot-button:hover{color:var(--violet)}.notice-card{padding:17px 20px;display:flex;align-items:flex-start;gap:10px;line-height:1.7;color:var(--muted);white-space:pre-wrap;font-size:12.3px}.notice-card svg{color:var(--violet);width:17px;height:17px}.notice-card.error{color:#c4626a;background:#fff6f6}.notice-card.error svg{color:#cf6473}.notice-card.ok{color:#23a18b;background:#f0fcf8}.notice-card p{margin:0}.feedback{display:flex;gap:10px;align-items:flex-start;padding:13px 17px;border-bottom:1px solid var(--line)}.feedback svg{width:18px;height:18px}.feedback strong{font-size:13.4px}.feedback p{margin:3px 0 4px;font-size:12.3px;color:var(--ink2)}.feedback.success{background:#f0fbf6;color:#1a9b77}.feedback.warning{background:#fff9ec;color:#b58236}.feedback-next{border:0;background:transparent;color:var(--violet);font-size:12.3px;font-weight:700;padding:5px 0}
.inspector{padding:18px 16px 0;overflow:hidden}.inspector-head .section-kicker{font-size:11.2px}.inspector-tabs{display:flex;gap:2px;background:var(--surface-2);padding:4px;border-radius:10px;margin-top:14px}.inspector-tab{flex:1;background:transparent;border:0;color:var(--muted);font-size:11.2px;font-weight:650;border-radius:7px;padding:8px 2px;white-space:nowrap}.inspector-tab.active{background:var(--surface);color:var(--violet);box-shadow:0 2px 6px #202b4811}.inspect-section{margin:20px 0 0;max-height:745px;overflow:auto;padding-bottom:17px;scrollbar-width:thin}.insight-head{display:flex;gap:10px;align-items:center;margin-bottom:14px}.insight-icon{height:33px;width:33px;border-radius:10px;background:var(--violet-pale);display:grid;place-items:center;color:var(--violet)}.insight-icon svg{width:17px}.insight-head strong{font-size:12.3px;display:block;line-height:1.4}.insight-head small{font-size:10px;display:block;color:var(--muted);margin-top:2px}.hint-level{border-top:1px solid var(--line)}.hint-level summary,.guide summary{list-style:none;cursor:pointer;font-size:12.3px;padding:11px 0;color:var(--ink2);font-weight:650;display:flex;align-items:center;justify-content:space-between;gap:7px}.hint-level summary::-webkit-details-marker,.guide summary::-webkit-details-marker{display:none}.hint-level summary:after,.guide summary:after{content:'+';color:var(--violet);font-size:17.9px}.hint-level[open] summary:after,.guide[open] summary:after{content:'−'}.hint-level p,.guide p,.inspect-description{font-size:12.3px;line-height:1.75;color:var(--muted);margin:4px 0 12px}.hint-level pre,.guide pre{font:11.2px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink2);padding:10px;border-radius:8px;white-space:pre-wrap;overflow:auto;background:var(--surface-2)}.insert-hint{border:0;background:var(--violet-pale);border-radius:7px;color:var(--violet);font-size:11.2px;padding:7px 10px;font-weight:700;margin:0 0 12px}.subsection-rule{height:1px;background:var(--line);margin:21px 0 16px}.inspector h4{font-size:12.3px;margin:0 0 10px}.guide{border-top:1px solid var(--line)}.guide-sub{padding:2px 7px 7px;border-top:1px dashed var(--line)}.guide-sub summary{font-size:11.2px;padding:8px 0;color:var(--muted)}.guide-sub summary:after{font-size:14.5px}.guide-sub pre{margin:6px 0}.inspector-bottom{background:var(--surface-2);margin:0 -16px;padding:16px;display:flex;gap:11px;border-top:1px solid var(--line)}.small-bulb{font-size:22.3px;color:#946ddd}.inspector-bottom b{font-size:11.2px}.inspector-bottom p{font-size:12px;color:var(--muted);line-height:1.6;margin:3px 0 0}.schema-item{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;overflow:hidden}.schema-item>summary{list-style:none;display:flex;gap:7px;align-items:center;cursor:pointer;padding:9px}.schema-item summary::-webkit-details-marker{display:none}.schema-item svg{width:14px;height:14px;color:var(--violet)}.schema-item strong{font-size:11.2px;word-break:break-all}.schema-item summary span{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}.schema-inside{border-top:1px solid var(--line);padding:9px}.schema-inside p{font-size:11.2px;color:var(--muted);margin:0 0 10px;line-height:1.6}.schema-field{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px 0;border-bottom:1px solid var(--line)}.schema-field code{font-size:11.2px;color:var(--ink2)}.schema-field span{font-size:10px;color:var(--muted);text-align:right}.history-item{display:flex;align-items:flex-start;flex-wrap:wrap;gap:5px;border:0;border-bottom:1px solid var(--line);padding:12px 0;width:100%;background:none;text-align:left}.history-item svg{height:13px;width:13px;color:var(--violet)}.history-item code{font:11.2px ui-monospace,SFMono-Regular,monospace;color:var(--ink2);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item small{font-size:10px;width:100%;color:var(--muted);margin-left:19px}
/* Interactive chart builder */
.chart-region{background:var(--surface)}.chart-builder{padding:15px 18px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}.chart-builder-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.chart-builder label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11.2px;font-weight:650}.chart-builder select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 25px 8px 9px;color:var(--ink2);font-size:12.3px;min-width:0;width:100%;text-overflow:ellipsis}.chart-tip{font-size:11.2px;color:var(--muted);margin:12px 0 0}.chart-visual{padding:11px 12px;min-height:330px;background:var(--chart-bg)}.rendered-chart{width:100%;min-width:0}.chart-canvas-heading{display:flex;align-items:center;justify-content:space-between;padding:7px 18px 0}.chart-canvas-heading>div{display:flex;flex-direction:column;gap:2px}.chart-label{font-size:10px;letter-spacing:.13em;font-weight:700;color:#a49ab2}.chart-canvas-heading strong{font-size:15.6px;color:var(--chart-ink);letter-spacing:-.02em}.chart-canvas-heading small{color:var(--chart-muted);font-size:11.2px}.analytics-svg{stroke:none;height:auto;display:block;max-height:360px;width:100%;margin:0 auto}.chart-failure,.chart-alert{padding:45px 20px;text-align:center;color:var(--muted);font-size:13.4px}.chart-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 18px}.chart-footer span{font-size:11.2px;color:var(--muted)}.chart-actions{display:flex;gap:7px}.chart-actions button{padding:8px 10px}.chart-actions button svg{width:12px;height:12px}
/* Dashboard */
.dashboard-page{padding:27px 26px;min-height:430px}.dashboard-title{display:flex;justify-content:space-between;align-items:center;gap:20px}.dashboard-title h2{font-size:31.2px;letter-spacing:-.055em;margin:5px 0}.dashboard-title h2 span{color:#9873e7}.dashboard-title p{color:var(--muted);font-size:13.4px;margin:0}.dash-top-actions{display:flex;gap:9px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:23px}.dashboard-empty{grid-column:1/-1;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;border:1px dashed #d8d4e5;background:var(--surface-2);border-radius:15px;padding:25px}.dashboard-empty-icon{height:60px;width:60px;border-radius:17px;background:#efe9ff;color:#886cda;display:grid;place-items:center;font-size:36.8px}.dashboard-empty h3{font-size:20.1px;margin:0}.dashboard-empty p{color:var(--muted);font-size:13.4px;max-width:450px;margin:0 0 7px}.dash-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--surface)}.dash-card-head,.dash-card-foot{padding:12px 15px;display:flex;justify-content:space-between;gap:10px;align-items:center}.dash-card-head{border-bottom:1px solid var(--line)}.dash-chart-title{font-size:13.4px;font-weight:700;color:var(--ink);border:none;background:transparent;min-width:0;flex:1;outline:none}.delete-chart{color:#b1a8b8}.delete-chart:hover{color:#cf616b}.delete-chart svg{width:15px;height:15px}.dash-card .rendered-chart{padding:5px 7px}.dash-card .chart-canvas-heading{padding-top:8px}.dash-card .analytics-svg{height:auto}.dash-card-foot{border-top:1px solid var(--line);color:var(--muted);font-size:11.2px}.dashboard-footnote{margin-top:21px;color:var(--muted);font-size:11.2px}
.bottom-banner{display:flex;align-items:center;gap:14px;border:1px solid #e8e3fc;background:linear-gradient(96deg,#f2edff,#f7f6ff);border-radius:13px;margin-top:20px;padding:16px 20px}.banner-icon{height:37px;width:37px;border-radius:12px;display:grid;place-items:center;background:#ddd2ff;color:#7554d9}.bottom-banner div:nth-child(2){flex:1}.bottom-banner b{font-size:13.4px;color:#42395e}.bottom-banner p{margin:3px 0 0;font-size:12.3px;color:#827a97}.bottom-banner a{font-size:12.3px;color:#7653d6;font-weight:700;display:flex;align-items:center;gap:7px;white-space:nowrap}.bottom-banner svg{width:15px}.site-footer{padding:17px 50px 27px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11.2px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);background:#28243d;color:#f2efff;border:1px solid #564987;border-radius:12px;padding:12px 17px;box-shadow:0 13px 43px #20183e50;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;z-index:99;font-size:12.3px;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#59323b;border-color:#be757a}.chart-tooltip{position:fixed;z-index:99;background:#292841;color:#fff;padding:6px 9px;border-radius:8px;pointer-events:none;font-size:12.3px}
/* Dark mode theme, including chart plot surfaces */
body.dark{--bg:#121525;--surface:#1c2233;--surface-2:#252b40;--ink:#e9ecf7;--ink2:#c9d2e5;--muted:#98a4ba;--line:#31384e;--violet:#b3a0ff;--violet-pale:#373052;--teal:#5dd5b9;--chart-bg:#1c2233;--chart-ink:#e5e8f6;--chart-muted:#9daac0;--chart-grid:#333d55;--chart-axis:#44516a;--chart-soft:#2c2843;--shadow:none}.dark .mast-stepik{color:#bfaaff}.dark .welcome{background:linear-gradient(105deg,#30294f,#28324b 65%,#284f49);border-color:#3e3a60}.dark .welcome h2{color:#fff}.dark .welcome h2 em{color:#c0abff}.dark .welcome p{color:#bdc1d4}.dark .welcome-eyebrow{color:#bba4fa}.dark .welcome-pills span{background:#ffffff13;border-color:#ffffff15;color:#d2cbe6}.dark .welcome-pills svg{color:#c4aaff}.dark .visual-card{background:#3c3858;border-color:#554e72}.dark .visual-value{color:#efecff}.dark .visual-overline,.dark .visual-sub{color:#b7aec5}.dark .metric-icon.purple{background:#42355d}.dark .metric-icon.blue{background:#2b4156}.dark .metric-icon.peach{background:#483b39}.dark .task-illustration{color:#413956}.dark .CodeMirror,.dark .editor-wrap{background:var(--surface)!important;color:#dce2f5!important}.dark .CodeMirror-gutters{background:var(--surface-2)!important}.dark .CodeMirror-linenumber{color:#606e8a!important}.dark .cm-s-default .cm-variable{color:#d4d8e8}.dark .cm-s-default .cm-keyword{color:#ba9cff}.dark .cm-s-default .cm-string{color:#f2ba7c}.dark .cm-s-default .cm-number{color:#73ddbf}.dark .results-status{background:#254b42;color:#92e2ce}.dark .new-feature{background:#2c594b;color:#79dcbb}.dark .data-table tr:nth-child(2n){background:#20263a}.dark .data-table tr:hover{background:#2b2b49}.dark .feedback.success{background:#203e34;color:#8fe3bb}.dark .feedback.warning{background:#453927;color:#e4c17e}.dark .notice-card.error{background:#4c2c38;color:#ffb8c3}.dark .notice-card.ok{background:#294b3c;color:#97d9bb}.dark .button-secondary{background:#453967;color:#e1d5ff;border-color:#67558f}.dark .button-outline{border-color:#63517d}.dark .inspector-bottom{background:var(--surface-2)}.dark .inspector-bottom p{color:var(--muted)}.dark .chart-visual{background:var(--chart-bg)}.dark .chart-label{color:#9b97ac}.dark .dashboard-empty{border-color:#47445c}.dark .bottom-banner{background:linear-gradient(100deg,#322a49,#293049);border-color:#433958}.dark .bottom-banner b{color:#e5dffa}.dark .bottom-banner p{color:#abb0c5}.dark .bottom-banner a{color:#c1adff}.dark .banner-icon{background:#423666;color:#c0adff}.dark .results-empty .empty-squiggle{background:#37304f}
/* Responsive */
@media(max-width:1390px){.work-layout{grid-template-columns:minmax(400px,1fr) 262px}.content-area{padding-left:26px;padding-right:26px}.masthead{padding-left:26px;padding-right:26px}.welcome-visual{width:260px}.visual-card{right:5px}}
@media(max-width:1220px){.work-layout{grid-template-columns:minmax(0,1fr)}.inspector{display:block}.inspector-head{display:flex;align-items:center;justify-content:space-between}.inspector-tabs{margin:0}.inspect-section{max-height:360px}.inspector-bottom{display:none}.insight-head{margin-top:4px}.welcome-visual{width:250px}.welcome p{max-width:470px}}
@media(max-width:900px){.rail{position:fixed;transform:translateX(-103%);width:min(300px,calc(100vw - 20px));transition:transform .2s}.rail.open{transform:translateX(0)}.nav-open,.rail-close{display:grid}.rail-close{margin-left:auto;color:#9f96c9}.brand-row{padding-right:10px}body.nav-open:after{content:'';position:fixed;inset:0;background:#1515288a;z-index:23}.masthead{height:65px}.content-area{padding:22px 20px}.welcome{height:auto;min-height:196px}.site-footer{padding:15px 20px 24px}}
@media(max-width:680px){.content-area{padding:15px 12px 20px}.masthead{padding:0 12px}.mast-stepik{display:none}.mast-right{gap:8px}.engine-state{font-size:11.2px;padding:6px 9px}.breadcrumbs{font-size:11.2px}.welcome{padding:23px 19px;min-height:0}.welcome h2{font-size:33.5px}.welcome p{font-size:12.3px}.welcome-visual{display:none}.metric-row{gap:8px;margin:12px 0}.metric{padding:11px 10px;gap:8px}.metric-icon{height:29px;width:29px;border-radius:9px}.metric-icon svg{width:15px;height:15px}.metric small{font-size:10px;line-height:1.3}.metric strong{font-size:17.9px}.metric strong span{font-size:11.2px}.task-card{padding:16px}.task-card h2{font-size:20.1px}.task-illustration{font-size:33.5px}.task-card p{font-size:12.3px}.panel-toolbar{padding:0 12px}.panel-title h3{font-size:13.4px}.panel-desc,.keyboard-hint{display:none}.CodeMirror{height:245px!important;font-size:13.4px!important}.query-actions{flex-wrap:wrap;padding:10px}.run-actions{margin-left:auto}.button-primary,.button-outline{padding:9px 10px}.results-head{padding:13px 11px}.results-head h3{font-size:14.5px}.results-head-left{gap:5px;flex-wrap:wrap}.results-status{font-size:10px}.results-tools{gap:5px}.icon-text{font-size:11.2px}.icon-text span{display:none}.results-tab-row{padding:0 11px}.result-caption{display:none}.results-foot{padding:11px;align-items:flex-start;gap:9px}.results-foot>span{max-width:170px}.results-foot .foot-button{white-space:nowrap}.chart-builder-row{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-visual{padding:0 3px;min-height:250px}.analytics-svg{height:auto;min-height:200px}.chart-canvas-heading{padding:12px 10px 0}.chart-footer{padding:10px;flex-wrap:wrap}.chart-actions{margin-left:auto}.dashboard-title{display:block}.dash-top-actions{margin-top:15px;flex-wrap:wrap}.dashboard-page{padding:17px 12px}.dashboard-grid{grid-template-columns:1fr}.bottom-banner{flex-wrap:wrap;gap:11px;padding:14px}.bottom-banner a{width:100%;margin-left:46px}.site-footer{padding:12px}}
@media(max-width:400px){.metric-icon{display:none}.metric{padding:10px}.welcome h2{font-size:29px}.query-actions{display:block}.run-actions{justify-content:flex-end;margin-top:7px}.example-trigger{padding:4px}.chart-actions .button-secondary{font-size:11.2px}.inspector-tabs{gap:0}.inspector-tab{font-size:10px}.results-foot>span{font-size:10px}}
@media print{.rail,.masthead,.welcome,.metric-row,.work-layout,.site-footer,.dash-top-actions,.delete-chart,.dash-card-foot{display:none!important}.content-area{padding:0!important}.main-shell{width:100%}.dashboard-page{display:block!important;border:0;padding:0}.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.dash-card{break-inside:avoid;border:1px solid #ddd}.dash-chart-title{color:#222}.rendered-chart svg{max-height:250px}.dashboard-footnote{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* v3: scalable navigation for 135 lessons, phone-friendly */
.mission-tools{display:flex;gap:6px;margin:8px 2px 11px;align-items:center}
.mission-tools input{width:100%;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:12.3px;outline:none}
.mission-tools input:focus{border-color:var(--violet);box-shadow:0 0 0 2px rgba(118,83,227,.1)}
.mission-tools button{flex:0 0 32px;width:32px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--violet);cursor:pointer}
.mission-group{border-top:1px solid var(--line)}
.mission-group summary.mission-stage{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;padding:11px 6px;color:var(--muted);font-size:11.2px;letter-spacing:.03em;font-weight:700;list-style:none}
.mission-group summary.mission-stage::-webkit-details-marker{display:none}
.mission-group summary.mission-stage small{color:var(--muted);background:var(--surface-2);border-radius:7px;padding:2px 6px;white-space:nowrap;font-size:11.2px}
.mission-group summary.mission-stage:before{content:'›';font-size:16.7px;transform:rotate(0);transition:transform .15s}
.mission-group[open] summary.mission-stage:before{transform:rotate(90deg)}
.mission-group-body{padding-bottom:7px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.backup-controls{display:flex;gap:6px;margin:10px 2px 4px}
.backup-controls button{flex:1;min-width:0;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 5px;font-size:11.2px;color:var(--muted);white-space:nowrap}
.backup-controls button:hover{color:var(--violet);border-color:var(--violet2)}

#engine-retry[hidden]{display:none!important}#engine-retry:not([hidden]){color:var(--violet);font-size:21.2px;font-weight:700}

/* SQL Studio 3.2 · optional query-plan inspector */
.query-plan{display:grid;gap:10px}
.plan-legend{display:flex;flex-direction:column;gap:4px;color:var(--muted,#8a94a6);font-size:12.3px;line-height:1.45;margin-bottom:4px}
.plan-step{border:1px solid var(--border,#e6eaf2);background:var(--surface,#fff);border-radius:12px;padding:11px 12px;min-width:0}
.plan-step-head{margin-bottom:8px}
.plan-tag{display:inline-flex;border-radius:6px;padding:3px 7px;font-size:11.2px;font-weight:700;letter-spacing:.4px;background:#eeeaff;color:#6447b5}
.plan-search .plan-tag{background:#d5f8ec;color:#116c50}
.plan-temp .plan-tag{background:#fff0d5;color:#935d16}
.plan-sql{white-space:pre-wrap;word-break:break-word;font-size:12.3px;display:block;line-height:1.45}
.plan-help{display:block;font-size:12.3px;line-height:1.5;margin-top:8px;color:var(--muted,#8a94a6)}
.plan-disclaimer,.plan-message{font-size:13.4px;color:var(--muted,#8a94a6);line-height:1.6}
.plan-error{color:#ba3b3b}
#explain-btn{font-size:12.3px;min-width:54px;white-space:nowrap}

/* SQL Studio 3.4 — isolated writable lab */
.lab-card{padding:22px 24px 18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;margin-bottom:16px}
.lab-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.lab-heading h2{font-size:clamp(22.3px,2.4vw,32.4px);line-height:1.2;letter-spacing:-.025em;margin:5px 0 9px}.lab-heading h2 span{color:#9678e9}.lab-heading p{font-size:14.5px;color:var(--muted,#727383);line-height:1.55;max-width:700px}
.lab-bubble{flex:0 0 auto;border:1px solid rgba(136,103,237,.22);border-radius:16px;color:var(--violet);font-size:13.4px;line-height:1.45;text-align:center;padding:14px 13px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.48)}
.lab-actions,.lab-examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.lab-actions{margin-top:18px}.lab-actions button{font-size:13.4px;padding:10px 12px;min-height:38px}
.lab-examples{margin-top:14px}.lab-examples>span:first-child{font-size:13.4px;color:var(--muted,#737488)}.lab-snippet{border:1px solid rgba(138,103,230,.28);color:inherit;background:rgba(255,255,255,.52);border-radius:100px;padding:6px 11px;font-size:13.4px;cursor:pointer}.lab-snippet:hover{background:rgba(138,103,230,.16)}.lab-save-state{font-size:12.3px;color:var(--muted,#777);margin-left:auto}
body.dark .lab-card{background:var(--surface)}body.dark .lab-bubble,body.dark .lab-snippet{background:rgba(29,30,42,.5)}
@media(max-width:800px){.lab-card{padding:17px}.lab-bubble{display:none}.lab-actions{gap:7px}.lab-actions button{flex:1 1 42%}.lab-save-state{flex:1 0 100%;margin:3px 0 0}}

/* v3.5 — guided SQL diagnostics and interactive foreign-key map */
.sql-diff{margin:12px 0 4px;border:1px solid rgba(123,99,199,.24);border-radius:12px;background:var(--surface,#fff);overflow:hidden}
.sql-diff>summary{cursor:pointer;list-style:none;padding:11px 13px;font-size:13.4px;font-weight:700;color:var(--violet,#7653e3);display:flex;align-items:center;gap:6px}
.sql-diff>summary:before{content:'+';display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:rgba(119,83,227,.10);font-size:16.7px}
.sql-diff[open]>summary:before{content:'−'}
.sql-diff>summary::-webkit-details-marker{display:none}
.sql-diff-hint{font-size:13.4px;line-height:1.6;padding:0 13px 11px;margin:0;color:var(--muted,#69728b)}
.sql-diff-index{display:block;margin:0 13px 6px;font-size:12.3px;letter-spacing:.025em;font-weight:700;color:var(--muted,#69728b)}
.sql-diff-entry{border-top:1px solid var(--line,#eceaf1);padding:10px 0 8px}
.sql-diff-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 10px}
.sql-diff-side{background:var(--surface-2,#f7f6fa);border:1px solid var(--line,#eceaf1);border-radius:9px;padding:9px 10px;min-width:0}
.sql-diff-side>small{font-weight:700;display:block;font-size:11.2px;margin-bottom:4px;color:var(--muted,#69728b)}
.sql-diff-side>code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.3px;line-height:1.5;color:var(--ink,#252537)}
.sql-diff-foot{font-size:11.2px;line-height:1.45;margin:1px 13px 12px;color:var(--muted,#69728b)}
.relation-map{margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#eceaf1);display:grid;gap:9px}
.relation-title{font-size:14.5px;font-weight:700;margin:0;color:var(--ink,#282943)}
.relation-intro{font-size:12.3px;line-height:1.5;margin:0 0 3px;color:var(--muted,#69728b)}
.relation-card{background:var(--surface,#fff);border:1px solid var(--line,#eceaf1);border-radius:11px;padding:10px;box-shadow:0 1px 4px rgba(25,25,60,.025)}
.relation-pair{display:flex;align-items:center;gap:6px;min-width:0}
.relation-node{background:var(--surface-2,#f8f6fc);border-radius:8px;min-width:0;padding:7px;flex:1;overflow-wrap:anywhere}
.relation-node strong,.relation-node code{display:block;line-height:1.38}
.relation-node strong{font-size:11.2px;font-weight:700;color:var(--ink,#29293c)}
.relation-node code{font-size:11.2px;color:var(--violet,#7653e3);margin-top:3px}
.relation-arrow{font-size:16.7px;color:var(--violet,#7653e3);font-weight:700}
.relation-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:9px}
.relation-foot small{font-size:11.2px;color:var(--muted,#69728b);line-height:1.4}
.relation-join{flex:none;cursor:pointer;border:1px solid rgba(122,95,206,.28);border-radius:7px;background:rgba(122,95,206,.09);color:var(--violet,#7653e3);font-size:11.2px;font-weight:700;padding:6px 9px}
.relation-join:hover{background:rgba(122,95,206,.18)}
.dark .sql-diff,.dark .relation-card{background:var(--surface)}
.dark .sql-diff-side,.dark .relation-node{background:var(--surface-2)}
@media(max-width:480px){.sql-diff-cols{grid-template-columns:1fr}.relation-card{padding:9px}}

/* Keep the relationship explorer discoverable without pushing fields below the fold. */
.relation-map{display:block;margin:0 0 12px;padding:0;border:1px solid rgba(123,99,199,.22);border-radius:11px;background:var(--surface,#fff);overflow:hidden}
.relation-map>summary{cursor:pointer;list-style:none;font-weight:700;font-size:13.4px;padding:11px 13px;color:var(--violet,#7653e3);background:rgba(123,99,199,.06)}
.relation-map>summary::-webkit-details-marker{display:none}
.relation-map .relation-intro{padding:10px 12px 0}
.relation-map .relation-card{margin:8px 10px}
.relation-map .relation-card:last-child{margin-bottom:10px}

/* SQL Studio 3.6 — selective review, bookmarks, actionable local SQL guidance */
.mission-filter{display:flex;align-items:center;gap:7px;margin:1px 2px 6px}
.mission-filter select{flex:1;min-width:0;appearance:none;background:#25283d;color:#e5e0fa;border:1px solid #454258;border-radius:9px;font-size:12.3px;font-weight:650;padding:9px 24px 9px 10px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b6a8f9' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.mission-filter-count{color:#aaa4c3;font-weight:700;font-size:12.3px;min-width:24px;text-align:right}
.mission-link{position:relative}.mission-link .mission-save{font-size:14.5px;color:#bc9efa;flex:none;margin-left:auto}
.mission-link .mission-review{display:block;color:#dcba76;font-size:10px;font-weight:650;margin-top:3px}
.bookmark-btn{margin-left:auto;white-space:nowrap;font-size:12.3px;font-weight:650;color:var(--violet);background:var(--violet-pale);border:1px solid rgba(118,83,227,.17);border-radius:8px;padding:7px 10px;min-height:34px}
.bookmark-btn[aria-pressed="true"]{color:#8155c5;background:#ece5ff;border-color:#c7afea}
.dialect-notes{font-size:12.3px;color:var(--muted);padding:6px 17px 4px;border-top:1px solid var(--line)}
.dialect-notes>summary{cursor:pointer;list-style:none;font-weight:650;display:inline-block}
.dialect-notes>summary::-webkit-details-marker{display:none}.dialect-notes[open]>summary{color:var(--violet)}
.dialect-notes>div{padding:7px 0 6px}.dialect-notes span{display:block;line-height:1.7}
.dialect-notes p{margin:6px 0 0}.dialect-notes code{background:var(--surface-2);border-radius:4px;padding:2px 4px;color:var(--ink)}
.coach-card{margin:13px 0 0;border:1px solid rgba(118,83,227,.24);background:var(--surface);border-radius:12px;padding:13px 15px;line-height:1.55}
.coach-title{font-size:13.4px;font-weight:700;color:var(--violet);margin:0 0 7px}
.coach-steps{margin:0;padding-left:19px;color:var(--ink2);font-size:13.4px}
.coach-steps li+li{margin-top:5px}
.coach-note{display:block;margin-top:8px;font-size:11.2px;color:var(--muted)}
@media(max-width:480px){.bookmark-btn{padding:7px 8px;font-size:11.2px}.dialect-notes{padding:8px 12px}.mission-filter{margin-bottom:2px}}

/* Keep the three-character logomark on one line (grid children previously stacked). */
.brand-glyph .brand-symbol{display:inline;white-space:nowrap;color:#fff;line-height:1;font-size:22.3px}
.brand-glyph .brand-symbol b{color:#b9ffdf;font-weight:700}
.review-schedule{display:block;color:var(--muted);font-size:12.3px;margin-top:9px}

#site-update[hidden]{display:none!important}
.update-button{flex:none;min-height:36px;white-space:nowrap;background:var(--violet-pale);color:var(--violet);border:1px solid rgba(118,83,227,.3);border-radius:8px;padding:7px 10px;font-size:12.3px;font-weight:650}
@media(max-width:680px){.update-button{position:absolute;top:calc(100% + 6px);right:12px;z-index:16;box-shadow:0 5px 15px rgba(0,0,0,.10)}}

/* v3.7 · Personal SQL library: compact, touch-friendly, no extra UI framework. */
#save-query-btn{width:auto;min-width:29px;padding-inline:7px;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;flex-shrink:0;font-weight:700;color:var(--violet);border-color:var(--line)}
.saved-queries-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}
.saved-queries-head h4{margin:0}.saved-queries-head small{font-size:11.2px;color:var(--muted);font-variant-numeric:tabular-nums}
.saved-query-search{display:block;box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink2);font-size:13.4px;margin:8px 0 12px;outline-offset:2px}
.saved-query-search:focus{outline:2px solid var(--violet)}
.saved-query-card{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:0 0 9px}
.saved-query-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.saved-query-card-head strong{color:var(--ink);font-size:12.3px;line-height:1.45;overflow-wrap:anywhere}
.saved-query-card-head small{color:var(--muted);font-size:10px;white-space:nowrap}
.saved-query-code{display:block;color:var(--ink2);font:11.2px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 0}
.saved-query-actions{display:flex;gap:7px;align-items:center}.saved-query-actions button{border-radius:7px;cursor:pointer;padding:7px 9px;font-size:11.2px;font-weight:650;border:1px solid var(--line);background:var(--surface-2);color:var(--ink2)}
.saved-query-actions .saved-query-open{background:var(--violet-pale);color:var(--violet);border-color:transparent;flex:1}
.saved-query-actions .saved-query-delete{padding:7px 10px}.saved-query-actions button:hover{filter:brightness(.95)}
.saved-query-empty{font-size:12.3px;line-height:1.65;color:var(--muted);margin:8px 0 12px}
.save-query-dialog{color:var(--ink);width:min(calc(100vw - 30px),440px);box-sizing:border-box;border:1px solid var(--line);border-radius:17px;padding:23px 24px;background:var(--surface);box-shadow:0 25px 70px #14142f44}
.save-query-dialog::backdrop{background:#10132488;backdrop-filter:blur(3px)}
.save-query-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.save-query-head h2{font-size:21.2px;margin:0;font-weight:700}
.save-query-dialog p{font-size:13.4px;color:var(--muted);line-height:1.7;margin:12px 0 18px}
.save-query-dialog label{display:block;font-size:12.3px;font-weight:700;margin-bottom:7px}
.save-query-dialog input{box-sizing:border-box;display:block;width:100%;padding:12px 13px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:9px;font:14.5px ui-sans-serif,system-ui,sans-serif}
.save-query-dialog input:focus{outline:2px solid var(--violet);outline-offset:1px}
.save-query-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:680px){#save-query-btn .save-query-label{display:none}}
@media(max-width:480px){#save-query-btn{font-size:13.4px;padding:6px 8px}.save-query-dialog{padding:18px}.saved-query-actions button{min-height:35px}}

@media(min-width:901px){.icon-btn.rail-close{display:none}}
@media(max-width:900px){
 .rail:not(.open){visibility:hidden}
 .masthead{position:sticky;top:0;z-index:21}
 #work-layout{scroll-margin-top:70px}
}

.welcome{height:auto;min-height:208px}
.welcome-visual{height:154px}
.welcome p{font-size:15.6px;color:#5d5672}
.dark .welcome p{color:#d2cbe6}
.welcome-start{display:inline-flex;align-items:center;min-height:40px;margin-top:12px;padding:0 12px;border-radius:8px;background:#684ac7;color:#fff;font-size:14.5px;font-weight:700}
.welcome-start:hover{background:#5538af}
#task-card{scroll-margin-top:76px}

.rail-link,.mission-tools input,.mission-filter select{font-size:14.5px}
.mission-copy strong{font-size:13.4px}
.mission-copy small{font-size:12.3px;color:#b0a8c2}
.backup-controls button{font-size:12.3px}
.metric small,.task-bottom span,.bookmark-btn,.inspector-tab{font-size:13.4px}
.task-heading p,.lab-heading p,.editor-guide,.hint-level p,.guide p,.inspect-description,.notice-card,.feedback p{font-size:15.6px}
.editor-guide{margin:0;padding:9px 16px;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.5}
.CodeMirror{font-size:16.7px!important}
.button-primary,.button-outline,.example-trigger,.result-tab,.hint-level summary,.guide summary,.data-table,.data-table th{font-size:14.5px}
.panel-title h3,.results-head h3,.insight-head strong{font-size:16.7px}
.task-bottom,.panel-toolbar,.panel-small-actions,.inspector-tabs,.run-actions{flex-wrap:wrap}
.panel-toolbar{height:auto;min-height:56px;padding-block:8px;gap:8px}
.panel-small-actions{gap:6px}
.inspector-tab{min-height:36px}

@media(max-width:900px){
 .welcome{min-height:0}
}
@media(max-width:680px){
 .metric{min-width:0}
 .metric small{font-size:12.3px}
 .metric-icon{display:none}
 .task-bottom{gap:8px}
 .task-bottom span{flex-basis:100%}
 .bookmark-btn{margin-left:0}
 .query-actions button,.panel-small-actions button,.results-tools button{min-height:40px}
}
@media(max-width:480px){
 .query-actions,.run-actions{justify-content:flex-start}
 .run-actions{margin-left:0}
 .results-tools .icon-text{min-width:40px;justify-content:center}
}


/* Keep navigation usable when larger text meets a short viewport. */
.rail{overflow-y:auto;height:100dvh}
.rail-lessons{min-height:250px}
.rail-link{height:auto;min-height:44px;padding-block:8px}
.rail-bottom{flex-shrink:0}
.rail-course{padding:13px 14px;gap:10px;background:#312751;border:1px solid #7464a3;border-radius:12px;color:#f2eaff}
.rail-course strong,.rail-course small{display:block}
.rail-course strong{font-size:15.8px}
.rail-course small{font-size:12.1px;color:#d0c6e6;margin-top:3px}
.rail-course:hover{background:#403367}

.bottom-banner{display:block;padding:26px 30px;margin-top:26px;border:1px solid #8467c5;background:#f1ebff;border-radius:16px}
.bottom-banner h2{margin:0 0 6px;color:#3c2a64;font-size:22.3px;line-height:1.2}
.bottom-banner p{color:#554666;font-size:14.9px}
.bottom-banner .stepik-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.bottom-banner a{width:auto;margin:0;white-space:normal;font-size:14px;color:#563b9d}
.bottom-banner .stepik-primary{background:#5e409f;color:#fff;border-radius:9px;padding:10px 14px}
.bottom-banner .stepik-primary:hover{background:#4c307f}
.bottom-banner .stepik-example:hover{text-decoration:underline}
.dark .bottom-banner h2{color:#f1eaff}
.dark .bottom-banner p{color:#d7cde5}
.dark .bottom-banner .stepik-example{color:#d6c5ff}

@media(max-width:680px){
 .bottom-banner{padding:20px 16px}
 .bottom-banner h2{font-size:19.5px}
 .results-head{flex-wrap:wrap}
}
@media(max-width:360px){
 .masthead,.mast-left,.mast-right{gap:6px}
 .breadcrumbs span{padding-inline:2px}
 .backup-controls button{white-space:normal}
}


/* Keep the editor and the current task visually ahead of navigation. */
.rail{
 --rail-bg:#eef0f6;--rail-ink:#34394e;--rail-muted:#565e75;
 --rail-line:#d8dce7;--rail-hover:#e5e8f0;--rail-current:#e5e0f3;
 --rail-accent:#534285;
 background:var(--rail-bg);color:var(--rail-ink);border-right:1px solid var(--rail-line);
}
.dark .rail{
 --rail-bg:#202432;--rail-ink:#e1e4ef;--rail-muted:#b2bbd0;
 --rail-line:#383e51;--rail-hover:#292f41;--rail-current:#35304a;
 --rail-accent:#d2c4f5;
}
.brand-row,.rail-bottom,.mission-group{border-color:var(--rail-line)}
.brand-row{height:auto;padding-block:18px}
.brand-glyph{background:#65538f;box-shadow:none}
.brand-name{letter-spacing:-.035em}
.brand-name span{color:var(--rail-accent);letter-spacing:-.025em}
.brand-name small,.rail-caption,.rail-section-title,.rail-section-title strong,.mission-group summary.mission-stage,.mission-copy small{color:var(--rail-muted)}
.rail-caption,.rail-section-title{letter-spacing:.06em}
.rail-group{padding-top:14px}
.rail-divider,.rail-progress{background:var(--rail-line)}
.rail-link,.mission-link{color:var(--rail-ink)}
.rail-link:hover,.mission-link:hover{background:var(--rail-hover);color:var(--rail-ink)}
.rail-link.active,.mission-link.selected{background:var(--rail-current);color:var(--rail-accent)}
.rail-link.active svg,.mission-link .mission-save,.rail-close{color:var(--rail-accent)}
.rail-count,.mission-group summary.mission-stage small,.mission-index{
 background:transparent;color:var(--rail-muted);border-color:var(--rail-line);
}
.mission-link.selected .mission-index{background:transparent;color:var(--rail-accent);border-color:var(--rail-line)}
.rail .mission-filter select,.rail .mission-tools input,.rail .mission-tools button,.rail .backup-controls button{
 background:var(--rail-bg);color:var(--rail-ink);border-color:var(--rail-line);box-shadow:none;
}
.rail .mission-filter select{appearance:auto;background-image:none;padding-right:8px}
.rail .mission-tools input::placeholder{color:var(--rail-muted)}
.rail .backup-controls button{white-space:normal}
.rail-bottom{background:var(--rail-bg)}
.rail-course{background:var(--rail-current);border-color:var(--rail-line);color:var(--rail-accent)}
.rail-course small{color:var(--rail-muted)}
.rail-course:hover{background:var(--rail-hover);color:var(--rail-accent)}
.mission-list{scrollbar-color:var(--rail-muted) transparent}

.welcome,.dark .welcome{background:var(--surface);border-color:var(--line);min-height:0}
.welcome h2{font-size:clamp(26px,2.7vw,37px);letter-spacing:-.025em;line-height:1.16;margin-top:0}
.welcome h2 em{color:inherit}
.welcome p{max-width:65ch;color:var(--muted)}
.welcome-pills span,.dark .welcome-pills span{
 border:0;background:transparent;color:var(--muted);padding:0 8px 0 0;
}
.welcome-pills svg,.dark .welcome-pills svg{color:var(--muted)}
.metric-row{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.metric{border:0;border-radius:0;box-shadow:none;background:transparent;padding-block:11px}
.metric+.metric{border-left:1px solid var(--line)}
.metric-icon{display:none}
.query-panel,.task-card,.results-panel,.inspector,.dashboard-page,.lab-card{box-shadow:none}
.button-primary{background:#665095;border-color:#665095;box-shadow:none}
.button-primary:hover{background:#554079}
.button-outline,.bookmark-btn,#save-query-btn{color:var(--ink2);border-color:var(--line);background:var(--surface)}
#save-query-btn:hover,.bookmark-btn:hover{background:var(--surface-2)}
.inspector-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.inspector-tab.active{box-shadow:none}
.bottom-banner,.dark .bottom-banner{background:var(--surface);border-color:var(--line)}
.bottom-banner h2,.dark .bottom-banner h2{color:var(--ink)}
.bottom-banner p,.dark .bottom-banner p{color:var(--muted)}
.bottom-banner .stepik-primary{background:var(--violet-pale);color:var(--violet);border:1px solid var(--line)}
.bottom-banner .stepik-primary:hover{background:var(--surface-2)}

#back-to-editor{margin-top:10px}
.hint-level summary,.editor-wrap{scroll-margin-top:76px}
.result-tab:focus-visible,[role="tabpanel"]:focus-visible{outline-offset:-3px}

/* Quiet optional course invitation after five newly solved tasks. */
.course-nudge{margin:13px 0 2px;padding:12px 14px;background:rgba(116,121,212,.10);border-left:3px solid #7b83df;border-radius:7px;line-height:1.6;font-size:13px}
.course-nudge a{font-weight:700;color:#8d9bff}
body:not(.dark) .course-nudge a{color:#3a45aa}
.course-nudge-hide{font:inherit;background:transparent;color:inherit;text-decoration:underline;border:0;cursor:pointer;padding:0 5px}

/* Useful guides and shareable tasks, without additional scripts or accounts. */
.welcome-guide-link{display:inline-flex;align-items:center;margin:12px 0 0 14px;color:#6040ac;font-size:13px;font-weight:700;text-decoration:none}
.welcome-guide-link:hover{text-decoration:underline}
.task-bottom{flex-wrap:wrap}
#share-task-btn{white-space:nowrap;min-height:34px}
@media(max-width:760px){.welcome-guide-link{display:block;margin:10px 0 0}.task-bottom{justify-content:flex-start;gap:8px 12px}.task-bottom>span:first-child{flex:1 0 100%}.task-bottom .bookmark-btn{margin-left:0}}

body.dark .welcome-guide-link{color:#c4b5fd}

/* Product refinement: one spacing scale and a quiet workspace in both themes. */
:root{--ui-radius:12px;--ui-gap:20px;--action:#6b46cf;--action-hover:#5935b6;--focus:#9777ec}
body.dark{--action:#7650d2;--action-hover:#8057db;--line:#343c50;--muted:#a7b2c8}
body{font-size:15px;line-height:1.6}
::selection{background:#d9cff8;color:#241747}
body.dark ::selection{background:#5b478b;color:#fff}
button,input,select{accent-color:var(--action)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rail{border-right:1px solid #ffffff0a}
.brand-row{height:76px;padding:18px 20px}
.brand-name{letter-spacing:-.035em;font-weight:650}
.brand-name span{letter-spacing:-.025em}
.brand-glyph{border-radius:11px;box-shadow:none}
.rail-group{padding-top:16px}
.rail-link{font-size:14px;font-weight:550;border-radius:8px}
.rail-articles{margin-top:9px;border-top:1px solid #ffffff12;border-radius:0;padding-top:7px;height:49px}
.rail-articles:hover{border-radius:8px}
.rail-course{box-shadow:none}
.masthead{height:66px}
.mast-right{gap:12px}
.mast-learn{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
.mast-learn svg{width:16px;height:16px;color:var(--violet)}
.mast-learn:hover{background:var(--surface-2);color:var(--violet)}
.breadcrumbs{font-size:12px;letter-spacing:.04em}
.content-area{padding-top:26px;padding-bottom:28px}
.welcome,body.dark .welcome{border:0;background:none;box-shadow:none;border-radius:0;padding:0 0 20px;min-height:0;height:auto;overflow:visible}
.welcome-copy{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start}
.welcome h2{font-size:28px;font-weight:650;line-height:1.2;letter-spacing:-.025em;margin:0 0 9px}
.welcome p{font-size:15px;line-height:1.6;max-width:64ch;margin:0;color:var(--muted);grid-column:1}
.welcome-start{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;background:var(--surface);color:var(--ink2);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600}
.welcome-start:hover{background:var(--violet-pale);color:var(--violet)}
.welcome-pills{grid-column:1 / -1;margin-top:12px;gap:14px;flex-wrap:wrap}
.welcome-pills span{padding:0;background:none!important;border:0!important;color:var(--muted);font-size:12px;box-shadow:none}
.metric-row{margin:0 0 20px;border-radius:var(--ui-radius);box-shadow:none}
.metric{padding:13px 18px}
.metric small{font-size:12px;font-weight:500;color:var(--muted)}
.metric strong{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.metric-icon{display:none}
.work-layout{gap:18px}
.task-card,.query-panel,.results-panel,.inspector,.lab-card{border-radius:var(--ui-radius);box-shadow:none}
.task-card{padding:20px 22px}
.task-top{margin-bottom:10px}
.task-heading #task-title{font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.35;margin:0 0 9px}
.task-heading p{font-size:16px;line-height:1.65;color:var(--ink2);margin:0;max-width:72ch}
.task-bottom{padding-top:13px;margin-top:17px;gap:8px 12px}
.task-bottom .link-btn,.bookmark-btn{font-size:12px;font-weight:550}
.task-reading{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}
.task-reading summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--violet);width:fit-content;list-style:none;border-radius:4px;padding:3px 0}
.task-reading summary::-webkit-details-marker{display:none}
.task-reading summary:after{content:'+';margin-left:5px;font-size:17px;font-weight:400}
.task-reading[open] summary:after{content:'−'}
.task-reading summary svg{width:16px;height:16px}
.task-reading-links{display:grid;gap:8px;margin:12px 0 8px}
.task-reading-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;font-size:14px;color:var(--ink2)}
.task-reading-links a svg{width:15px;height:15px}
.task-reading-links a:hover{color:var(--violet);border-color:var(--violet)}
.task-reading small{display:block;color:var(--muted);font-size:12px;line-height:1.6}
.feedback-reading{border:0;background:none;color:var(--violet);font:600 13px var(--font);padding:8px 0;margin-left:14px;text-decoration:underline;text-underline-offset:4px}
.panel-toolbar{min-height:54px;padding:10px 16px;height:auto;gap:10px;flex-wrap:wrap}
.panel-title h3,.results-head h3{font-size:16px;font-weight:650;letter-spacing:-.01em}
.panel-small-actions{gap:6px;flex-wrap:wrap}
.mini-button{font-size:12px;font-weight:550;border-radius:6px;min-height:30px}
.editor-guide{font-size:13px;line-height:1.6;padding:10px 16px;color:var(--muted);margin:0}
.CodeMirror{font:15px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace!important;height:230px!important}
.CodeMirror-gutters{border-right:1px solid var(--line)!important;background:var(--surface)!important}
.query-actions{padding:12px 16px}
.run-actions{gap:9px}
.button-primary,.button-outline,.button-secondary{border-radius:8px;font-size:14px;font-weight:600;min-height:42px;padding:10px 15px}
.button-primary{background:var(--action)!important;border:1px solid var(--action)!important;color:#fff!important;box-shadow:none}
.button-primary:hover:not(:disabled){background:var(--action-hover)!important;border-color:var(--action-hover)!important}
.button-outline,.button-secondary{background:var(--surface);color:var(--ink2);border:1px solid var(--line);box-shadow:none}
#run-btn.button-outline{background:var(--surface)!important;color:var(--ink2)!important;border:1px solid var(--line)!important}
#run-btn.button-outline:hover:not(:disabled){border-color:var(--violet)!important;color:var(--violet)!important}
#run-btn.button-outline .run-arrow{display:none}
#reset-db{color:var(--muted)}
#reset-db:hover{color:#c44354}
.results-head{padding:16px 18px}
.data-table{font-size:14px;font-variant-numeric:tabular-nums}
.data-table th{font-size:12px;font-weight:600;color:var(--muted)}
.data-table td{padding:11px 14px}
.inspector-head,.inspect-section{padding-left:16px;padding-right:16px}
.inspector-tabs{border-radius:8px}
.inspector-tab{font-size:12px;font-weight:600;border-radius:6px;min-height:36px}
.insight-head strong{font-size:15px;font-weight:600;line-height:1.4}
.inspector .section-kicker{letter-spacing:.07em;font-size:10px}
.hint-level summary{font-size:13px;font-weight:550;padding-block:13px}
.lab-bubble{display:none}
.lab-heading h2{font-size:24px;font-weight:650;letter-spacing:-.02em}
.lab-actions{gap:8px;flex-wrap:wrap}
.lab-actions button{font-size:13px}
.article-discovery{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.discovery-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.discovery-heading h2{font-size:22px;line-height:1.35;font-weight:650;letter-spacing:-.02em;margin:0}
.discovery-heading>a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--violet);white-space:nowrap}
.discovery-heading>a svg{width:15px;height:15px}
.article-discovery>p{font-size:14px;color:var(--muted);line-height:1.7;max-width:80ch;margin:10px 0 20px}
.article-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.article-grid>li{min-width:0}
.article-card{display:flex;height:100%;flex-direction:column;border:1px solid var(--line);border-radius:var(--ui-radius);padding:18px;background:var(--surface);color:var(--ink)}
.article-card h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.4;margin:0 0 9px}
.article-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.article-card>span{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:12px;font-weight:600;color:var(--muted)}
.article-card>span svg{width:14px;height:14px}
.article-card:hover{border-color:var(--violet)}
.article-card:hover h3{color:var(--violet);text-decoration:underline;text-underline-offset:4px}
.bottom-banner,body.dark .bottom-banner{padding:22px 24px;margin-top:28px;border:1px solid var(--line);border-radius:var(--ui-radius);background:var(--surface-2)}
.bottom-banner h2{font-size:20px;line-height:1.4;font-weight:600;letter-spacing:-.015em}
.bottom-banner p{font-size:14px;max-width:85ch;color:var(--muted);line-height:1.65}
.stepik-primary{font-size:14px;border-radius:8px;box-shadow:none}
.site-footer{font-size:12px;line-height:1.7;gap:12px}
@media(max-width:1100px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-copy{display:block}.welcome-start{display:inline-flex;margin-top:12px}.welcome-pills{margin-top:12px}.welcome h2{font-size:26px}}
@media(max-width:760px){
 .masthead{height:60px;padding-inline:12px}.mast-right{gap:7px}.mast-learn{font-size:12px;padding:7px 5px;gap:5px}.mast-learn svg{width:15px;height:15px}
 .content-area{padding:20px 14px}.welcome h2{font-size:24px}.welcome p{font-size:14px}.welcome{padding-bottom:18px}.welcome-pills{gap:6px 12px}.welcome-pills span{font-size:11px}
 .metric{padding:11px 12px}.metric small{font-size:11px;line-height:1.4}.metric strong{font-size:19px}.metric-row{margin-bottom:16px}
 .task-card{padding:18px}.task-heading #task-title{font-size:20px}.task-heading p{font-size:15px}.task-top{margin-bottom:8px}.task-bottom{margin-top:14px;padding-top:11px}
 .task-reading{margin-top:12px}.panel-toolbar{padding:10px 12px}.panel-title h3{font-size:15px}.panel-small-actions{margin-left:auto}.editor-guide{padding:10px 12px;font-size:12px}
 .CodeMirror{font-size:14px!important;height:220px!important}.query-actions{padding:12px}.run-actions{display:flex;width:100%}.run-actions button{flex:1;padding:10px 7px;font-size:13px;min-width:0}.run-actions svg{width:16px;height:16px}
 .article-discovery{margin-top:26px;padding-top:22px}.discovery-heading h2{font-size:20px}.article-discovery>p{font-size:13px;margin-bottom:16px}
 .article-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;gap:10px;overflow-x:auto;padding:3px 3px 12px;scroll-snap-type:x proximity;scroll-padding:3px}
 .article-grid>li{scroll-snap-align:start}.article-card{padding:16px}.article-card h3{font-size:16px}.bottom-banner,body.dark .bottom-banner{padding:20px 18px}
 .feedback-reading{display:block;margin:6px 0 0}.results-head{padding:14px}.data-table td{padding:10px 12px}
}
@media(max-width:600px){.mast-left .breadcrumbs{display:none}.mast-right{flex:1;justify-content:flex-end}.mast-stepik{display:none}.engine-state{font-size:11px;padding:7px 9px}.masthead .icon-btn{width:34px;height:34px}.panel-desc{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.article-grid{scroll-snap-type:none}}

.article-grid:focus-visible,.table-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Keep the editor close to the task, including when reading links are collapsed. */
.welcome p{max-width:80ch}
.task-reading{margin-top:10px;padding-top:0;border-top:0}
@media(min-width:761px){.metric{padding-block:10px}.metric>div{display:flex;align-items:baseline;gap:12px}.metric strong{font-size:18px}.CodeMirror{height:205px!important}}

/* Legible secondary labels and difficulty status in both themes. */
.task-difficulty{font-size:12px;font-weight:600;color:#6040ac}
body.dark .task-difficulty{color:#c8b8ff}
.inspector .section-kicker,.editor-state,.panel-state{font-size:12px}


/* SQL result-grid UX: preview-only search and accessible per-column sorting.
   Uses the existing color variables; both themes and small screens stay readable. */
.result-grid-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.result-grid-search{display:flex;flex-direction:column;gap:3px;min-width:170px;flex:1 1 190px;max-width:380px}
.result-grid-label{font-size:11px;color:var(--muted);font-weight:650}
.result-grid-input{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-height:35px;max-width:100%;color:var(--ink);font-size:13px}
.result-grid-reset{background:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;min-height:35px;color:var(--violet);font-size:12px;font-weight:650}
.result-grid-reset:disabled{opacity:.45;cursor:default}
.result-grid-count{color:var(--muted);font-size:11.5px;margin-left:auto;padding-bottom:7px;font-variant-numeric:tabular-nums}
.data-table .result-grid-sort{display:flex;align-items:center;gap:6px;width:100%;min-width:max-content;border:0;border-radius:5px;padding:4px 2px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.data-table .result-grid-sort:hover{color:var(--violet)}
.data-table .result-grid-sort:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.data-table th[aria-sort="ascending"],.data-table th[aria-sort="descending"]{color:var(--violet)}
.data-table .result-grid-empty{text-align:center;white-space:normal;color:var(--muted);padding:18px}
@media(max-width:600px){.result-grid-toolbar{padding:10px;gap:7px}.result-grid-search{flex-basis:100%;max-width:none}.result-grid-count{margin-left:0;padding-bottom:3px}}

/* Expand SQL editing space for multi-CTE and analytic queries without changing default layout. */
.editor-wrap.editor-expanded .CodeMirror{height:clamp(315px,60vh,640px)!important}
#editor-expand-btn[aria-pressed="true"]{color:var(--violet);background:var(--violet-pale);border-color:var(--violet2)}


/* Read-only schema preview stays inside the inspector, never overwrites SQL. */
.schema-insert{font-size:14px;min-width:25px;min-height:25px;background:var(--surface);color:var(--violet);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.schema-insert:hover,.schema-peek-btn:hover{background:var(--violet-pale)}
.schema-peek-btn{display:block;border:1px solid var(--line);background:var(--surface-2);color:var(--violet);font-size:11.5px;font-weight:650;border-radius:7px;padding:8px 10px;cursor:pointer;margin:9px 0 3px}
.schema-preview{max-width:100%;font-size:11.5px;color:var(--ink2)}
.schema-peek-count,.schema-peek-key{font-size:11px;line-height:1.5;margin:7px 0!important;color:var(--muted)}
.schema-peek-key span{display:block;font-size:10.5px;margin-top:3px;color:var(--ink2)}
.schema-peek-scroll{overflow:auto;max-height:250px;border:1px solid var(--line);border-radius:7px;scrollbar-color:var(--line) transparent}
.schema-peek-table{border-collapse:collapse;width:100%;font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.schema-peek-table th,.schema-peek-table td{padding:6px 9px;text-align:left;border:1px solid var(--line);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.schema-peek-table th{position:sticky;top:0;background:var(--surface-2)}
.schema-peek-table .data-null{font-style:italic;color:var(--muted)}
.schema-peek-error{color:#b74551;font-size:12px}


/* Four local-first case-study datasets, optional personal-lab replacement only. */
.lab-preset-field{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--muted)}
.lab-preset-field select{max-width:205px;min-height:36px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:12px}
@media(max-width:600px){.lab-preset-field{width:100%;justify-content:space-between}.lab-preset-field select{flex:1;max-width:none}}

/* Storage permission is opt-in; status is informational, not an upsell. */
.lab-storage-health{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 0 1px}
.lab-storage-health button{font-size:11.5px;padding:7px 10px;min-height:34px}
.lab-storage-health button:disabled{opacity:.7;cursor:default}
.lab-storage-health small{flex:1 1 260px;font-size:11px;line-height:1.5;color:var(--muted)}


/* Compact optional per-column stats; closed by default so it does not crowd SQL. */
.result-grid-profile{padding:9px 15px;border-top:1px solid var(--line);background:var(--surface)}
.result-grid-profile summary{cursor:pointer;color:var(--violet);font-size:12px;font-weight:650;width:fit-content}
.result-grid-column-select{margin-top:10px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--ink2);font-size:12px;max-width:100%}
.result-grid-stat-line{font-size:12px;line-height:1.6;color:var(--ink2);margin:8px 0 0}


/* SQL Studio v1.0 B/C — optional guided learning without blocking the editor. */
.learning-hub{margin:0 0 19px;padding:19px 22px;border:1px solid var(--line);background:var(--surface);border-radius:15px}
.learning-hub-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.learning-hub-head h2{margin:5px 0;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.learning-hub-head p{margin:0;max-width:680px;font-size:12px;line-height:1.6;color:var(--muted)}
.learning-hub-head .button-outline{min-height:38px;white-space:nowrap}
.learning-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.learning-route-btn{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:78px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink2);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s ease}
.learning-route-btn strong{font-size:13px;color:var(--ink)}
.learning-route-btn small{font-size:11px;line-height:1.55;color:var(--muted)}
.learning-route-btn:hover,.learning-route-btn:focus-visible,.learning-route-btn[aria-pressed="true"]{border-color:var(--violet);outline-offset:2px}
.learning-hub-tools{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.learning-disclosure{min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.learning-disclosure>summary{padding:12px 14px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer}
.learning-disclosure[open]>summary{border-bottom:1px solid var(--line)}
.learning-chapter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}
.learning-chapter-btn{display:flex;align-items:flex-start;gap:7px;width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:inherit;font-size:11.5px;text-align:left;color:var(--ink2);cursor:pointer;min-height:40px}
.learning-chapter-btn[aria-pressed="true"],.learning-chapter-btn:hover{border-color:var(--violet)}
.learning-chapter-guide{padding:2px 12px 12px;font-size:12px;line-height:1.6;color:var(--ink2)}
.learning-chapter-guide h3{margin:7px 0;font-size:14px;color:var(--ink)}
.learning-chapter-guide pre{max-width:100%;overflow:auto;white-space:pre;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;padding:11px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink2)}
.learning-chapter-guide p{margin:8px 0}
.learning-chapter-guide .button-primary{min-height:36px;margin-top:6px}
.learning-skill-map{display:grid;gap:8px;padding:11px}
.learning-skill-item{padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;gap:6px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.learning-skill-item strong{font-size:11.5px;color:var(--ink)}
.learning-skill-item small{font-size:10.5px;color:var(--muted)}
.learning-skill-track{grid-column:1/-1;height:5px;background:var(--line);border-radius:5px;overflow:hidden}
.learning-skill-fill{height:100%;border-radius:5px;background:var(--violet);max-width:100%}
.learning-skill-item button{font:inherit;font-size:11px;color:var(--violet);cursor:pointer;background:none;border:0}
.learning-disclaimer{padding:0 11px 11px;margin:0;font-size:10.5px;line-height:1.55;color:var(--muted)}
.learning-next{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;font-size:12px;line-height:1.5;color:var(--ink2)}
.learning-next button{background:none;border:0;color:var(--violet);font:inherit;font-weight:750;cursor:pointer;padding:5px 0}
.learning-task-status{margin-top:8px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.learning-remediation{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 11px;background:var(--surface-2);border-radius:9px;font-size:12px;color:var(--ink2)}
.learning-remediation[hidden],.learning-chapter-status[hidden]{display:none!important}
.learning-remediation button{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:7px 11px;font-size:11.5px;font-weight:650;color:var(--violet);cursor:pointer}
.learning-chapter-status{margin-top:7px;border-left:3px solid var(--violet);padding:8px 12px;font-size:11.5px;color:var(--ink2);background:var(--surface-2)}
.learning-solution{margin-top:12px;border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--surface-2)}
.learning-solution>summary{font-size:12px;font-weight:700;cursor:pointer;color:var(--ink2)}
.learning-solution pre{margin:9px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink2)}
.learning-solution button{margin-top:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink2);padding:7px 10px;cursor:pointer}
@media(max-width:980px){.learning-hub-tools{grid-template-columns:1fr}}
@media(max-width:690px){.learning-hub{padding:15px}.learning-route-grid{grid-template-columns:1fr}.learning-route-btn{min-height:56px}.learning-chapter-list{grid-template-columns:1fr}.learning-hub-head h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.learning-route-btn{transition:none}}


/* Plan v1.0: first-party marketplace story and locally saved analyst write-up. */
.business-case-body{font-size:12px;line-height:1.65;color:var(--ink2)}
.business-case-body p{margin:8px 0}
.business-case-body ul,.business-case-body ol{margin:8px 0 13px;padding-left:21px}
.business-case-body li{padding:3px 0}
.business-report{padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);margin-top:12px}
.business-report summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:12px}
.business-note-label{display:grid;gap:7px;margin:12px 0 6px;font-size:11px;font-weight:700;color:var(--ink2)}
.business-note{font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;width:100%;min-height:145px;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical}
.business-note:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.business-note-private{color:var(--muted);font-size:10.5px;line-height:1.5}
@media(max-width:600px){.business-report{padding:9px}.business-note{min-height:170px;font-size:12px}}

/* v42 presentation. Existing editor, result, chart and database components share these tokens. */
:root{
 --bg:#f4f6f8;--surface:#fff;--surface-2:#e8edf2;--ink:#192634;--ink2:#364655;--muted:#536478;--line:#d0dbe6;
 --violet:#224b81;--violet2:#95b0d5;--violet-pale:#e5eef9;--action:#234b80;--action-hover:#183c6c;--action-text:#fff;--focus:#39679c;
 --teal:#177457;--radius:8px;--ui-radius:8px;--shadow:none;
 --chart-series:#3e72ae;--chart-bg:var(--surface);--chart-ink:var(--ink);--chart-muted:var(--muted);--chart-grid:var(--line);--chart-axis:var(--line);--chart-soft:var(--violet-pale);
 --editor-bg:#1b2530;--editor-gutter:#202c39;--editor-line:#344453;--editor-ink:#e4ebf4;
}
body.dark{
 --bg:#232423;--surface:#292b29;--surface-2:#343632;--ink:#eceeea;--ink2:#c9cdc7;--muted:#afb6af;--line:#454844;
 --violet:#b1c9eb;--violet2:#8aabd1;--violet-pale:#303944;--action:#b3c6e0;--action-hover:#c9d8ec;--action-text:#172332;--focus:#9bbbe4;
 --teal:#a2d1b5;--chart-series:#9cb9e0;--chart-bg:var(--surface);--chart-ink:var(--ink);--chart-muted:var(--muted);--chart-grid:var(--line);--chart-axis:var(--line);--chart-soft:var(--violet-pale);
 --editor-bg:#191c1d;--editor-gutter:#222629;--editor-line:#3b444a;
}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
body ::selection,body.dark ::selection{background:var(--violet-pale);color:var(--ink)}
.studio-skip{position:fixed;left:16px;top:10px;transform:translateY(-150%);z-index:100;padding:10px 14px;background:var(--surface);color:var(--ink);border-radius:6px}
.studio-skip:focus{transform:none}
.rail,.dark .rail{
 --rail-bg:#202b37;--rail-ink:#e0e8f2;--rail-muted:#bcc9d9;--rail-line:#405063;--rail-hover:#2a394a;--rail-current:#324457;--rail-accent:#f3f7fb;
 background:var(--rail-bg);color:var(--rail-ink)
}
body.dark .rail{--rail-bg:#171817;--rail-ink:#dce2dc;--rail-muted:#b9c4bd;--rail-line:#414742;--rail-hover:#262a27;--rail-current:#303531;--rail-accent:#f0f3ef}
.brand-row .brand-name .studio-wordmark{color:var(--rail-accent);font-weight:720}
.studio-desktop{display:none}
.studio-editor-column{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;min-width:0}
body .masthead,body.dark .masthead{background:var(--bg);border-bottom:1px solid var(--line)}
body .engine-state,body.dark .engine-state{background:transparent;border-color:transparent;color:var(--teal)}
body .button-primary,body.dark .button-primary{color:var(--action-text)!important}
body .task-difficulty,body.dark .task-difficulty{color:var(--violet);background:var(--violet-pale)}
body .editor-wrap,body.dark .editor-wrap,body .editor-wrap .CodeMirror,body.dark .editor-wrap .CodeMirror{background:var(--editor-bg)!important;color:var(--editor-ink)!important}
body .editor-wrap .CodeMirror-gutters,body.dark .editor-wrap .CodeMirror-gutters{background:var(--editor-gutter)!important;border-color:var(--editor-line)!important}
body .editor-wrap .CodeMirror-linenumber,body.dark .editor-wrap .CodeMirror-linenumber{color:#a0aebf!important}
.editor-wrap .CodeMirror-cursor{border-color:#d4e2f3!important}
.editor-wrap .CodeMirror-selected{background:#2e4359!important}
body .editor-wrap .cm-keyword,body.dark .editor-wrap .cm-keyword{color:#a9cafd}
body .editor-wrap .cm-string,body.dark .editor-wrap .cm-string{color:#e8b78f}
body .editor-wrap .cm-number,body.dark .editor-wrap .cm-number{color:#a6d9b7}
body .editor-wrap .cm-comment,body.dark .editor-wrap .cm-comment{color:#a6b2bf}
body .editor-wrap :is(.cm-variable,.cm-variable-2,.cm-operator),body.dark .editor-wrap :is(.cm-variable,.cm-variable-2,.cm-operator){color:var(--editor-ink)}
.editor-wrap :is(.cm-builtin,.cm-type,.cm-variable-3){color:#b7d5ff}
.editor-wrap :is(.cm-atom,.cm-meta,.cm-qualifier){color:#dcc9fc}
.editor-wrap :is(.cm-bracket,.cm-punctuation,.cm-attribute,.cm-property,.cm-def,.cm-tag){color:var(--editor-ink)}
.editor-wrap :is(.cm-string-2,.cm-quote){color:#f3c6a2}
.editor-wrap :is(.cm-error,.cm-invalidchar,.cm-negative){color:#ffb6b8}
.editor-wrap .cm-positive{color:#a6d9b7}
.editor-wrap .cm-link{color:#b7d5ff}
.editor-wrap .CodeMirror-matchingbracket{color:#c4efd5!important;background:#304637}
.editor-wrap .CodeMirror-nonmatchingbracket{color:#ffb6b8!important;background:#4e3038}
.editor-wrap .cm-searching{background:#47573c;color:#f5f8ef}
.editor-wrap:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
.result-caption,.keyboard-hint{color:var(--muted)}
.empty-squiggle,.square-mark,.insight-icon,.dashboard-empty-icon{background:var(--violet-pale);color:var(--violet)}
.chart-label{color:var(--muted);font-size:12px;letter-spacing:0}
.chart-builder label{font-size:12px}
.chart-builder select{padding-right:8px}
.toast{background:var(--rail-toast,#253342);color:#f4f7fb;border-color:#43586d;border-radius:8px}
.dashboard-title h2 span{color:var(--violet)}
.dashboard-empty{background:var(--surface);border-color:var(--line);border-radius:8px}
.studio-task-passed{color:var(--teal)}
#xray-btn{width:auto;min-width:44px;padding-inline:7px}
#studio-content:focus{outline:none}

.practice-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.practice-dialect{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.practice-dialect button{border:1px solid transparent;border-radius:5px;padding:5px 10px;min-height:32px;background:transparent;color:var(--ink2);font:inherit;font-size:13px;font-weight:650}
.practice-dialect button:hover,.practice-dialect button[aria-pressed=true]{background:var(--surface);color:var(--action)}
.practice-dialect button[aria-pressed=true]{border-color:var(--line)}
[data-pg-level],[data-pg-topic],[data-pg-order]{min-height:36px;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}
[data-pg-topic]{min-height:32px;font-size:13px;min-width:120px}
body[data-studio-surface=postgres] #engine-badge,body[data-studio-surface=postgres] #engine-retry{display:none}
#studio-postgres [hidden],#practice-dialect[hidden]{display:none!important}
#studio-postgres .studio-page-head{margin-bottom:0}

.pg-progress small{color:var(--muted);font-size:12px}
.pg-task-heading{display:flex;align-items:center;gap:16px;margin-bottom:15px}
.pg-task-heading h2{font-size:23px;line-height:1.2;margin:0}
.pg-task-heading button{white-space:nowrap;padding-right:12px;border-right:1px solid var(--line)}
.pg-workspace{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.6fr);gap:14px;align-items:start}
.pg-task h3{margin:8px 0 11px;font-size:22px;line-height:1.2}
.pg-task p{line-height:1.55}
[data-pg-target]{color:var(--muted);font-size:13px}
.pg-task details{border-top:1px solid var(--line);padding-top:11px}
.pg-task summary{cursor:pointer;font-weight:600}
.pg-task code{overflow-wrap:anywhere}
.pg-editor-column{display:grid;gap:13px;min-width:0}
.pg-editor,.pg-results{min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.pg-editor header,.pg-results header,.pg-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 13px}
.pg-editor header,.pg-results header{min-height:41px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pg-editor header span,.pg-actions span{font-size:12px;color:var(--muted)}
.pg-editor header span{margin-right:auto}
.pg-result-tabs{display:flex;gap:15px;padding:0 12px;border-bottom:1px solid var(--line)}
.pg-result-tabs svg{width:15px;height:15px}
.pg-actions{justify-content:flex-start}
.pg-actions span{margin-left:auto}
#studio-postgres .CodeMirror{height:clamp(190px,28vh,310px)!important}
[data-pg-status]{margin:0;padding:11px 13px;color:var(--muted)}
[data-pg-status][data-state=success]{color:var(--teal)}
[data-pg-status][data-state=error]{color:var(--ink);background:var(--surface-2);font-weight:650}
[data-pg-result]{overflow:auto}
.pg-inspector{min-width:0;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.pg-inspector details{color:var(--ink2);line-height:1.6;overflow-wrap:anywhere}
.pg-plan-head{padding-top:10px;margin:12px 0 0;border-top:1px solid var(--line)}
[data-pg-plan-output]{margin-top:10px;overflow-wrap:anywhere}
[data-pg-plan-output] pre{white-space:pre-wrap;font:12px/1.6 ui-monospace,Consolas,monospace}
.pg-task .task-kicker{font-size:12px;font-weight:650;color:var(--action);margin:0}
@media(max-width:900px){
 .pg-workspace{grid-template-columns:minmax(0,1fr)}
 #studio-postgres .studio-task-row{grid-template-columns:minmax(0,1fr)}
}
body[data-studio-surface="home"] :is(#welcome,#learning-hub,#metric-row,#work-layout,#dashboard-page,#article-discovery,#bottom-banner,#studio-work-heading),
body[data-studio-surface="catalog"] :is(#welcome,#learning-hub,#metric-row,#work-layout,#dashboard-page,#article-discovery,#bottom-banner,#studio-work-heading){display:none}
@media(max-width:900px){
 :is(.studio-overview,.studio-catalog,#studio-postgres) .studio-page-head h2{margin:0 0 8px;font-size:25px}
 :is(.studio-overview,.studio-catalog) .studio-page-head{margin-bottom:15px}
 .studio-overview-grid,.studio-overview-primary,.studio-overview-side,.studio-catalog-grid{display:grid;gap:16px}
 .studio-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:15px}
 .studio-metrics button,.studio-next,.studio-reading,.studio-preview{border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--surface);color:var(--ink)}
 .studio-metrics button span,.studio-reading small{display:block;font-size:12px;color:var(--muted)}
 .studio-overview svg,.studio-catalog svg,#studio-postgres .studio-task-open svg{width:14px;height:14px}
 .studio-next-meta,.studio-section-title,.studio-preview header,.studio-pagination,.studio-practice-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
 .studio-topic-progress{list-style:none;padding:0}
 .studio-topic-progress button,.studio-personal>button{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between;padding:8px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink)}
 .studio-reading{display:flex;align-items:center;gap:8px}
 .studio-overview .studio-backup{display:none}
 .studio-practice-strip{padding:8px 0;border-block:1px solid var(--line)}
 .studio-practice-strip progress{width:70px}
 .studio-catalog-search,.studio-topics,.studio-statuses{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0}
 .studio-search{width:100%;display:flex;align-items:center;gap:8px}
 .studio-search input{width:100%;min-width:0}
 :is(.studio-catalog,[data-pg-catalog]) :is(input,select,.studio-statuses button,#catalog-topics button,.studio-topic-buttons button){padding:6px 8px;min-height:34px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);font:inherit}
 :is(.studio-catalog,[data-pg-catalog]) button[aria-pressed="true"]{background:var(--violet-pale);color:var(--action)}
 .studio-catalog :is(#catalog-topics,.studio-topic-buttons){display:flex;flex-wrap:wrap;gap:4px}
 .studio-task-table-head{display:none}
 .studio-task-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;border-top:1px solid var(--line)}
 .studio-task-open{display:grid;grid-template-columns:14px 33px minmax(0,1fr) 15px;gap:5px;align-items:center;min-height:45px;padding:4px;border:0;background:none;color:var(--ink);text-align:left}
 .studio-task-name small,.studio-task-level{display:none}
 .studio-bookmark{border:0;background:none;color:var(--muted)}
 .studio-task-row.studio-previewed{background:var(--violet-pale)}
 .studio-preview-body{display:grid;gap:8px;padding-top:8px}
 .studio-preview-body :is(h3,p){margin:0}
}
@media(min-width:901px){
 .studio-desktop{display:flex}
 .rail{width:138px;padding:0 8px;height:100dvh;overflow-y:auto}
 .brand-row{min-height:57px;height:auto;padding:0 8px;gap:7px;border:0;display:flex}
 .brand-row .brand-glyph{width:16px;height:24px;background:transparent;box-shadow:none;color:var(--rail-accent);font-size:12px}
 .brand-glyph svg{width:15px;height:15px}
 .brand-row .brand-name{font-size:13px;letter-spacing:-.02em;white-space:nowrap}
 .studio-navigation{display:grid;gap:3px;padding:10px 0 0}
 .rail .rail-link{display:flex;align-items:center;gap:10px;padding:7px 9px;min-height:38px;font-size:13px;font-weight:580;border-radius:6px;margin:0}
 .rail .rail-link svg{width:16px;height:16px}
 .rail .rail-articles{border:0;margin-top:12px}
 .rail .rail-articles::before{content:'';position:absolute;left:14px;right:14px;border-top:1px solid var(--rail-line);transform:translateY(-24px)}
 .studio-rail-end{margin-top:auto;padding-block:12px}
 .studio-rail-end .rail-link{width:100%}
 .rail-lessons,.rail-divider,.rail-bottom{display:none}
 .studio-rail-collapsed .rail{width:57px}
 .studio-rail-collapsed .rail-link{justify-content:center;padding-inline:5px}
 .studio-rail-collapsed .rail-link>span,.studio-rail-collapsed .brand-name{display:none}
 .studio-rail-collapsed .brand-row{justify-content:center;padding:0}
 .masthead{height:57px;padding-inline:clamp(24px,3.2vw,52px);position:sticky;top:0;z-index:20}
 .mast-left{display:flex;gap:12px;align-items:center}
 #studio-rail-toggle{align-items:center;justify-content:center;color:var(--muted);width:32px;height:34px}
 .studio-rail-collapsed #studio-rail-toggle svg{transform:scaleX(-1)}
 .breadcrumbs strong{font-size:14px;color:var(--ink)}
 .content-area{max-width:1800px;padding:26px clamp(24px,3.2vw,52px) 40px}
 .studio-overview{max-width:1192px;margin:auto}
 .studio-page-head h2,.studio-work-heading h2{margin:0;font-size:30px;font-weight:740;line-height:1.16;letter-spacing:-.028em}
 .studio-page-head h2:focus,.studio-work-heading h2:focus{outline:none}
 .studio-page-head p{font-size:14px;margin:8px 0 0;color:var(--muted)}
 .studio-page-head{padding:3px 0 16px}
 body[data-studio-surface] .metric-row,body[data-studio-surface] .welcome{display:none}
 body[data-studio-surface="learning"] :is(#work-layout,#dashboard-page,#article-discovery,#bottom-banner,#studio-work-heading),
 body[data-studio-surface]:not([data-studio-surface="learning"]) #learning-hub{display:none}
 .studio-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin:7px 0 24px}
 .studio-metrics button{position:relative;display:grid;gap:2px;justify-items:start;background:none;border:0;color:var(--ink);text-align:left;padding:13px 34px 12px 16px;min-width:0}
 .studio-metrics button+button{border-left:1px solid var(--line)}
 .studio-metrics button:hover{background:var(--violet-pale)}
 .studio-metrics strong{font-size:23px;font-weight:720;line-height:1.2;letter-spacing:-.026em}
 .studio-metrics span{font-size:13px;color:var(--muted)}
 .studio-metrics svg{position:absolute;bottom:13px;right:15px;width:15px;height:15px;color:var(--violet)}
 .studio-overview-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:28px}
 .studio-overview-primary,.studio-overview-side{min-width:0;display:grid;gap:24px;align-content:start}
 .studio-next,.studio-reading{background:var(--surface);border:1px solid var(--line);border-radius:8px}
 .studio-next{padding:20px 22px}
 .studio-next-meta{display:flex;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
 #overview-task-context{color:var(--violet);font-weight:650}
 .studio-next h3{font-size:24px;line-height:1.22;letter-spacing:-.023em;margin:9px 0}
 .studio-next p{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.55}
 .studio-next .button-primary{min-height:37px;font-size:13px;padding:6px 12px}
 .studio-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:27px}
 .studio-section-title h3,.studio-overview-side h3,.studio-personal h3{font-size:16px;line-height:1.25;margin:0;font-weight:700}
 .studio-section-title small{color:var(--muted);font-size:12px}
 .studio-topic-progress{list-style:none;padding:0;margin:7px 0 0;border-block:1px solid var(--line)}
 .studio-topic-progress li+li{border-top:1px solid var(--line)}
 .studio-topic-progress button,.studio-personal>button{display:grid;grid-template-columns:minmax(0,1fr) 62px 48px 14px;align-items:center;gap:10px;min-height:42px;width:100%;padding:5px 9px;background:none;border:0;color:var(--ink2);font-size:13px;text-align:left}
 .studio-topic-progress button:hover,.studio-personal>button:hover{background:var(--violet-pale)}
 .studio-topic-progress svg,.studio-personal svg{width:14px;height:14px;color:var(--violet)}
 .studio-topic-progress span:nth-of-type(2){text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
 .studio-personal>button{grid-template-columns:18px minmax(0,1fr) auto;margin-top:8px;border-block:1px solid var(--line)}
 .studio-backup{margin-top:11px;color:var(--muted);font-size:13px}
 .studio-backup summary{cursor:pointer;min-height:32px;padding-block:5px}
 .studio-backup .backup-controls{width:fit-content;margin:5px 0 0}
 .studio-backup .backup-controls button{color:var(--ink2);border:1px solid var(--line);background:var(--surface);padding:6px 9px}
 .studio-reading{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:start;gap:11px;margin-top:10px;padding:14px;color:var(--ink)}
 .studio-reading:hover{background:var(--violet-pale);border-color:var(--violet2)}
 .studio-reading-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;background:var(--violet-pale);color:var(--violet)}
 .studio-reading svg{width:16px;height:16px}
 .studio-reading-arrow{margin-top:8px;color:var(--violet)}
 .studio-reading small,.studio-reading strong{display:block;overflow-wrap:anywhere}
 .studio-reading small{font-size:12px;color:var(--muted);margin-bottom:3px}
 .studio-reading strong{font-size:15px;font-weight:690}
 .studio-practice-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px;border-block:1px solid var(--line);min-height:46px;margin:0 0 17px;font-size:13px;font-variant-numeric:tabular-nums}
 .studio-practice-strip button{margin-left:9px}
 #catalog-next-unsolved{order:3;margin-left:auto}
 .studio-practice-strip progress,.studio-topic-progress progress{appearance:none;width:62px;height:4px;border:0;border-radius:10px;overflow:hidden;background:var(--line);color:var(--violet)}
 .studio-practice-strip progress::-webkit-progress-bar,.studio-topic-progress progress::-webkit-progress-bar{background:var(--line)}
 .studio-practice-strip progress::-webkit-progress-value,.studio-topic-progress progress::-webkit-progress-value{background:var(--violet)}
 .studio-practice-strip progress::-moz-progress-bar,.studio-topic-progress progress::-moz-progress-bar{background:var(--violet)}
 .studio-catalog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,275px);gap:24px;align-items:start}
 .studio-catalog-main,.studio-catalog-side{min-width:0}
 .studio-catalog-side{position:sticky;top:72px}
 .studio-catalog-side>a{margin:9px 3px}
 .studio-catalog-search{display:flex;align-items:stretch;gap:10px;margin:6px 0 9px}
 .studio-search{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding-inline:10px}
 .studio-search svg{width:15px;height:15px;color:var(--muted)}
 .studio-search,#catalog-level,#catalog-order,[data-pg-level],[data-pg-order]{min-height:40px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
 .studio-search:focus-within{outline:2px solid var(--focus);outline-offset:1px}
 .studio-search input{width:100%;min-width:0;border:0;background:none;color:var(--ink);font-size:13px}
 .studio-search input:focus{outline:none}
 .studio-search input::placeholder{color:var(--muted)}
 #catalog-level,#catalog-order,[data-pg-level],[data-pg-order]{max-width:38%;padding:5px 10px;font-size:13px}
 .studio-topics{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;color:var(--muted);font-size:12px}
 #catalog-more-topics,[data-pg-topic]{min-height:32px;max-width:100%;padding:3px 7px;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:7px;font-size:12px}
 :is(#catalog-topics,.studio-topic-buttons){display:flex;flex-wrap:wrap;gap:5px}
 :is(#catalog-topics,.studio-topic-buttons) button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:32px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:12px;font-weight:590}
 :is(#catalog-topics,.studio-topic-buttons) button:hover{border-color:var(--violet2)}
 :is(#catalog-topics,.studio-topic-buttons) button[aria-pressed="true"]{background:var(--violet-pale);border-color:var(--violet2);color:var(--violet)}
 :is(#catalog-topics,.studio-topic-buttons) small,.studio-statuses small{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
 .studio-statuses{display:flex;flex-wrap:wrap;gap:5px 19px;margin:4px 0 8px;border-bottom:1px solid var(--line)}
 .studio-statuses button{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:4px 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink2);font-size:13px;white-space:nowrap}
 .studio-statuses button:hover,.studio-statuses button[aria-pressed="true"]{color:var(--violet)}
 .studio-statuses button[aria-pressed="true"]{border-color:var(--violet);font-weight:680}
 .studio-statuses [data-catalog-filter="saved"]{margin-left:auto}
 .studio-task-table,.studio-preview{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
 .studio-task-table-head,.studio-task-open{display:grid;grid-template-columns:22px 36px minmax(0,1fr) minmax(66px,104px) 16px;align-items:center;gap:10px}
 .studio-task-table-head{min-height:41px;padding:0 42px 0 13px;background:var(--surface-2);font-size:12px;color:var(--muted);font-weight:650}
 .studio-task-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;border-top:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 60px}
 .studio-task-open{width:100%;text-align:left;padding:8px 10px 8px 13px;min-height:58px;background:transparent;border:0;color:var(--ink)}
 .studio-task-open>svg,.studio-task-passed svg,.studio-bookmark svg{width:15px;height:15px;display:block}
 .studio-task-open>svg,.studio-task-pending{color:var(--muted)}
 .studio-task-open:focus-visible,.studio-bookmark:focus-visible{outline-offset:-3px}
 .studio-task-name{display:grid;gap:1px;min-width:0}
 .studio-task-name strong{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
 .studio-task-name small,.studio-task-level{font-size:12px;color:var(--muted)}
 .studio-task-number{font:11px ui-monospace,Consolas,monospace;color:var(--muted)}
 .studio-task-row:hover,.studio-task-row.studio-previewed{background:var(--violet-pale)}
 .studio-task-row.studio-previewed .studio-task-open{box-shadow:inset 2px 0 var(--violet)}
 .studio-bookmark{display:grid;place-items:center;border:0;background:none;color:var(--muted)}
 .studio-bookmark:hover,.studio-bookmark[aria-pressed="true"]{color:var(--violet)}
 .studio-bookmark[aria-pressed="true"] svg{fill:var(--violet)}
 .studio-catalog-empty{padding:23px 14px;text-align:center;color:var(--muted);font-size:13px}
 .studio-pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
 .studio-pagination button{min-height:34px;padding:4px 9px;font-size:12px}
 .studio-preview header{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 13px;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--ink2);font-size:12px}
 .studio-preview header span{font:11px ui-monospace,Consolas,monospace;color:var(--muted)}
 .studio-preview-body{display:grid;gap:10px;padding:14px}
 .studio-preview h3{margin:0;font-size:18px;line-height:1.24;letter-spacing:-.02em;overflow-wrap:anywhere}
 .studio-preview p{margin:0;font-size:13px;line-height:1.55;color:var(--ink2);overflow-wrap:anywhere}
 #catalog-preview-meta,#catalog-preview-target,.studio-preview .studio-preview-meta,.studio-preview .studio-preview-target{font-size:12px;color:var(--muted)}
 #catalog-preview-target,.studio-preview-target{padding-top:8px;border-top:1px solid var(--line)}
 .studio-preview button{display:flex;justify-content:space-between;gap:7px;min-height:38px;padding:6px 10px;font-size:13px;text-align:left}
 .studio-preview button svg{width:15px;height:15px}
 .studio-work-heading{align-items:center;gap:12px;margin-bottom:14px}
 .studio-work-heading h2{font-size:23px}
 .studio-work-heading [hidden],body[data-studio-view="dashboard"] #studio-work-heading{display:none}
 .studio-work-heading button{padding-right:12px;border-right:1px solid var(--line)}
 .work-layout{grid-template-columns:minmax(0,1fr) minmax(235px,280px);gap:14px}
 .work-column,.studio-editor-column{gap:13px}
 .work-layout .inspector{padding:12px 0 0}
 .work-layout .inspector-tabs{margin-top:5px}
 .studio-inspector-title{margin:0 0 8px;font-size:14px;font-weight:680}
 .work-layout .inspect-section{margin-top:12px}
 .task-card,.lab-card{padding:16px}
 .task-heading #task-title{font-size:20px;line-height:1.22}
 .task-heading p{font-size:14px;line-height:1.55}
 .task-bottom{margin-top:12px;padding-top:9px}
 .task-top{flex-wrap:wrap;gap:5px}
 .task-top .section-kicker{font-size:11px;color:var(--muted);letter-spacing:0}
 .task-bottom .bookmark-btn{min-height:30px}
 .panel-toolbar{min-height:46px;padding:7px 12px}
 .editor-guide{padding:7px 12px}
 .CodeMirror{height:clamp(195px,25vh,275px)!important}
 .query-actions{padding:9px 12px}
 .results-head{padding:12px}
 .results-empty{min-height:130px;align-items:flex-start;text-align:left;padding:16px}
 .results-empty .empty-squiggle{display:none}
 #dashboard-page{padding:0;border:0;background:transparent}
 .dashboard-title h2{font-size:23px;letter-spacing:-.025em}
 .dash-card{border-radius:8px}
}
@media(min-width:1200px){
 body[data-studio-view="learn"] #work-layout,.pg-workspace{grid-template-columns:minmax(275px,1.22fr) minmax(0,2.15fr) minmax(215px,.88fr)}
 body[data-studio-view="learn"] #task-card,.pg-task{padding:22px;align-self:start;min-height:250px;border-top:3px solid var(--action)}
 body[data-studio-view="learn"] #task-title{font-size:23px}
 body[data-studio-view="learn"] .task-heading p,.pg-task [data-pg-condition]{font-size:15px;line-height:1.6}
 body[data-studio-view="learn"] .work-column{display:contents}
 body[data-studio-view="learn"] #task-card{grid-column:1}
 body[data-studio-view="learn"] .studio-editor-column{grid-column:2}
 body[data-studio-view="learn"] #work-layout .inspector{grid-column:3}
 body[data-studio-view="lab"] #work-layout .inspector{grid-column:1;grid-row:1}
 body[data-studio-view="lab"] #work-layout .work-column{grid-column:2;grid-row:1}
 body[data-studio-view="lab"] #work-layout{grid-template-columns:minmax(255px,320px) minmax(0,1fr)}
}

/* Schema canvas uses live table and foreign-key metadata from the SQL worker. */
.studio-er-open{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px;min-height:35px;padding:5px 9px;font-size:12px}
.studio-er-open svg{width:15px;height:15px}
.studio-er{width:min(1190px,calc(100% - 24px));max-width:none;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface)}
.studio-er::backdrop{background:#111820aa}
.studio-er-header,.studio-er-tools{display:flex;align-items:center;gap:8px;padding:10px 15px;border-bottom:1px solid var(--line)}
.studio-er-header{justify-content:space-between}
.studio-er-header h2,.studio-er-details h3{margin:0;font-size:18px;line-height:1.3}
.studio-er-header p,.studio-er-tools p,.studio-er-details p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.studio-er-tools p{margin-left:auto}
.studio-er-tools .button-outline{min-height:34px;padding:5px 10px;font-size:13px}
.studio-er-tools .icon-btn{width:34px;height:34px;font-size:18px}
.studio-er-tools output{min-width:43px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.studio-er-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;height:min(66dvh,var(--studio-er-height,650px))}
.studio-er-canvas{min-width:0;overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle,var(--line) .85px,transparent 1px) 0 0/16px 16px var(--bg);outline-offset:-2px}
#studio-er-space{position:relative;margin:auto}
#studio-er-stage{position:absolute;inset:0 auto auto 0;transform-origin:top left}
.studio-er-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.studio-er-wires>path{stroke:var(--muted);stroke-width:1.4}
.studio-er-wires>path.studio-er-highlight{stroke:var(--violet);stroke-width:2.1}
.studio-er-card{position:absolute;width:226px;border-radius:7px;background:var(--surface);outline:1px solid var(--line)}
.studio-er-card>button{display:flex;width:100%;align-items:center;gap:7px;text-align:left;min-width:0;height:37px;padding:0 9px;border:0;border-bottom:1px solid var(--line);border-radius:7px 7px 0 0;background:var(--surface-2);color:var(--ink)}
.studio-er-card>button[aria-pressed="true"],.studio-er-card>button:hover{background:var(--violet-pale);color:var(--violet)}
.studio-er-card>button svg{width:15px;height:15px}
.studio-er-card>button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 13px ui-monospace,Consolas,monospace}
.studio-er-field{display:grid;grid-template-columns:34px minmax(0,1fr) 54px;gap:4px;align-items:center;height:25px;padding:0 7px;border-top:1px solid var(--line)}
.studio-er-field span{font-size:10px;color:var(--violet);font-weight:700}
.studio-er-field code,.studio-er-field small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-er-field code{font:12px ui-monospace,Consolas,monospace}
.studio-er-field small{color:var(--muted);text-align:right;font-size:10px}
.studio-er-details{border-left:1px solid var(--line);min-width:0;overflow:auto;padding:15px}
.studio-er-details h3,.studio-er-details li{overflow-wrap:anywhere}
.studio-er-details ul{padding:0;list-style:none;margin:11px 0 0}
.studio-er-details li{padding:8px 0;border-top:1px solid var(--line);font:12px/1.5 ui-monospace,Consolas,monospace}
@media(max-width:760px){
 .studio-er-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .studio-er-details{border-left:0;border-top:1px solid var(--line);max-height:110px}
 .studio-er-tools p{display:none}
}