/*
Theme Name: DataEngineerX
Theme URI: https://dataengineerx.com/
Author: DataEngineerX
Description: Custom DataEngineerX learning, SQL problems and IT jobs theme.
Version: 2.7.0
*/

:root{--bg:#08090b;--panel:#101216;--panel2:#15171c;--text:#f5f6f8;--muted:#a7abb4;--line:#25282f;--accent:#ff3b30;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.65}a{text-decoration:none;color:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,9,11,.9);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.nav-wrap{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;font:700 20px "Space Grotesk"}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:8px;color:var(--accent)}.accent,.eyebrow,.arrow{color:var(--accent)}.nav{display:flex;gap:28px;font-size:14px;color:#c9ccd2}.nav a:hover,.nav a.active{color:#fff}.menu-btn{display:none;border:0;background:none;color:#fff;font-size:24px}
.hero{padding:110px 0 95px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 25%,rgba(255,59,48,.11),transparent 32%)}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;margin-bottom:16px}h1,h2,h3{font-family:"Space Grotesk";line-height:1.12;margin:0 0 18px}h1{font-size:clamp(42px,6vw,76px);letter-spacing:-2.5px}h1 span{color:#b7bbc3}h2{font-size:38px}h3{font-size:21px}p{color:var(--muted);margin:0 0 20px}.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{padding:12px 20px;border-radius:8px;border:1px solid var(--line);font-weight:600;font-size:14px;display:inline-flex}.btn.primary{background:var(--accent);border-color:var(--accent)}.hero-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.terminal-top{height:42px;border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center;padding:0 16px}.terminal-top i{width:8px;height:8px;border-radius:50%;background:#5d6168}.hero-card pre{margin:0;padding:25px;font:14px/2.1 ui-monospace,Consolas,monospace;color:#e2e4e8}
.section{padding:90px 0}.dark-section{background:#0d0f12;border-block:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:36px}.section-head>p{max-width:450px}.topic-grid,.project-grid,.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.topic-card,.project-card,.note{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px}.topic-card{min-height:240px;display:flex;flex-direction:column;transition:.2s}.topic-card:hover,.project-card:hover{transform:translateY(-3px);border-color:#444952}.topic-icon{font:700 13px "Space Grotesk";color:var(--accent);border:1px solid #4b2220;width:max-content;padding:5px 8px;border-radius:6px;margin-bottom:24px}.topic-card p,.project-card p{font-size:14px}.arrow{font-size:13px;font-weight:700;margin-top:auto}.project-card{min-height:230px;display:flex;flex-direction:column}.project-card span{font-size:10px;letter-spacing:1.6px;color:var(--accent);font-weight:700;margin-bottom:24px}.project-card b{margin-top:auto;font-size:13px}.jobs-box{border:1px solid var(--line);border-radius:14px;padding:38px;display:flex;justify-content:space-between;align-items:center;background:#111318}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.about-grid p{font-size:18px}footer{border-top:1px solid var(--line);padding:25px 0;color:#777d86;font-size:12px}footer .container{display:flex;justify-content:space-between}
.page-hero{padding:80px 0 42px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:58px}.page-hero p{max-width:720px}.toolbar{display:flex;gap:14px;align-items:center;margin-top:30px}.toolbar input{width:min(540px,100%);background:var(--panel);border:1px solid var(--line);color:#fff;border-radius:8px;padding:13px 15px;outline:0}.toolbar input:focus{border-color:#555b65}.count{font-size:12px;color:#777d86}.lesson-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.lesson-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;grid-template-columns:45px 1fr;gap:18px;min-height:155px;transition:.2s}.lesson-card:hover{transform:translateY(-3px);border-color:#444952}.lesson-number{font:700 14px "Space Grotesk";color:var(--accent)}.lesson-card h3{font-size:19px;margin-bottom:7px}.lesson-card p{font-size:13px;margin-bottom:9px}.pagination{display:flex;justify-content:center;gap:7px;margin-top:40px;flex-wrap:wrap}.pagination button{min-width:38px;height:38px;border-radius:7px;background:var(--panel);border:1px solid var(--line);color:#c8cbd0;cursor:pointer}.pagination button.active,.pagination button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.pagination button:disabled{opacity:.35}
.article-hero{padding:60px 0 45px;border-bottom:1px solid var(--line)}.back{display:inline-block;color:#aeb3bb;font-size:13px;margin-bottom:38px}.article-hero h1{font-size:58px}.article-hero p{max-width:760px;font-size:18px;white-space:pre-line}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:60px}.article-block{padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--line)}.article-block h2{font-size:29px}.article-block p{font-size:16px}.codebox{background:#050608;border:1px solid var(--line);border-radius:10px;padding:20px;color:#ddd;font:14px/1.85 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow:auto}.tip{border-left:3px solid var(--accent);padding:16px 18px;background:var(--panel);border-radius:0 8px 8px 0}.side-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;position:sticky;top:100px}.side-card p{font-size:13px}.side-card a{display:block;border-top:1px solid var(--line);padding:10px 0;font-size:13px;color:#ddd}
@media(max-width:800px){.nav{display:none;position:absolute;left:20px;right:20px;top:65px;background:#101216;border:1px solid var(--line);border-radius:10px;padding:15px;flex-direction:column;gap:12px}.nav.open{display:flex}.menu-btn{display:block}.hero-grid,.about-grid,.article-layout{grid-template-columns:1fr}.hero{padding:75px 0}.topic-grid,.project-grid,.note-grid,.lesson-grid{grid-template-columns:1fr}.section-head{display:block}.jobs-box{display:block}.jobs-box .btn{margin-top:18px}.side-card{position:static}.page-hero h1,.article-hero h1{font-size:43px}}

.playground-hero{padding-bottom:34px}.playground-note{display:inline-flex;gap:9px;align-items:center;border:1px solid #39201f;background:#111216;padding:10px 13px;border-radius:8px;color:#b9bdc5;font-size:12px}.playground-note span{color:#39c77a}.playground-section{padding-top:45px}.playground-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.toolbar-left{display:flex;gap:9px}.status{font-size:12px;color:#8c929c}.status.good{color:#45d98b}.playground-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.editor-panel,.schema-panel,.result-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-head{height:48px;padding:0 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:13px}.panel-head span{font-size:11px;color:#777d86}.editor-panel textarea{display:block;width:100%;height:390px;resize:vertical;border:0;outline:0;background:#07080a;color:#e6e7e9;padding:20px;font:14px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}.shortcuts{padding:9px 15px;border-top:1px solid var(--line);font-size:11px;color:#666c75}.shortcuts span{color:#a9adb4;margin-left:8px}.schema-panel{min-height:438px}.schema-table{padding:15px 16px;border-bottom:1px solid var(--line);font-size:13px}.schema-table b{display:block;margin-bottom:8px}.schema-table span{display:block;color:#9da2aa;font:12px/1.9 ui-monospace,monospace}.schema-table small{color:#60656e}.result-panel{margin-top:14px}.result{min-height:150px}.empty-result,.success-result{padding:45px;text-align:center;color:#777d86;font-size:13px}.success-result{color:#48ce87}.table-wrap{overflow:auto;max-height:460px}.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}.table-wrap th{position:sticky;top:0;background:#16181d;color:#dce0e5;text-align:left}.table-wrap th,.table-wrap td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}.table-wrap td{color:#bfc3ca}.error-box{margin-top:14px;padding:15px 17px;border:1px solid #6c2724;background:#1a0d0c;border-radius:9px;color:#ff8b83;font:13px/1.6 ui-monospace,monospace;white-space:pre-wrap}.examples{margin-top:45px}.example-buttons{display:flex;gap:9px;flex-wrap:wrap}.example-buttons button{background:var(--panel);border:1px solid var(--line);color:#c7cbd1;border-radius:7px;padding:9px 12px;font-size:12px;cursor:pointer}.example-buttons button:hover{border-color:#555b65;color:#fff}.playground-info{margin-top:55px;padding-top:40px;border-top:1px solid var(--line)}.playground-info h2{font-size:30px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:25px}.info-grid div{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:18px}.info-grid b,.info-grid span{display:block}.info-grid b{font-family:"Space Grotesk";margin-bottom:5px}.info-grid span{font-size:12px;color:var(--muted)}
@media(max-width:800px){.playground-grid{grid-template-columns:1fr}.schema-panel{min-height:auto}.playground-toolbar{display:block}.toolbar-left{margin-bottom:12px}.info-grid{grid-template-columns:1fr 1fr}.editor-panel textarea{height:330px}}

.practice-section{margin:55px 0;padding:30px;border:1px solid #39201f;border-radius:14px;background:linear-gradient(135deg,#111216,#0c0d10)}.practice-section>h2{font-size:31px;margin-bottom:8px}.mini-playground{margin-top:25px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#07080a}.mini-toolbar{display:flex;align-items:center;gap:9px;padding:12px;border-bottom:1px solid var(--line)}.mini-toolbar span{margin-left:auto;font-size:11px;color:#777d86}.mini-good{color:#48ce87!important}.mini-bad{color:#ff8b83!important}.mini-playground textarea{display:block;width:100%;height:300px;resize:vertical;background:#07080a;border:0;outline:0;color:#e6e7e9;padding:20px;font:13px/1.8 ui-monospace,Consolas,monospace}.mini-result-head{height:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-size:12px}.mini-result-head span{color:#777d86}.mini-result{min-height:110px}.challenge{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:20px}.challenge b{font-family:"Space Grotesk";font-size:17px}.challenge p{font-size:14px;margin:8px 0 0}

.industry-block{background:linear-gradient(135deg,#101216,#0c0d10);padding:26px;border:1px solid var(--line);border-radius:12px}.practice-section{margin:55px 0;padding:30px;border:1px solid #39201f;border-radius:14px;background:linear-gradient(135deg,#111216,#0c0d10)}.practice-section>h2{font-size:31px;margin-bottom:8px}.mini-playground{margin-top:25px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#07080a}.mini-toolbar{display:flex;align-items:center;gap:9px;padding:12px;border-bottom:1px solid var(--line)}.mini-toolbar span{margin-left:auto;font-size:11px;color:#777d86}.mini-good{color:#48ce87!important}.mini-bad{color:#ff8b83!important}.mini-playground textarea{display:block;width:100%;height:310px;resize:vertical;background:#07080a;border:0;outline:0;color:#e6e7e9;padding:20px;font:13px/1.8 ui-monospace,Consolas,monospace}.mini-result-head{height:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-size:12px}.mini-result-head span{color:#777d86}.mini-result{min-height:110px}.challenge-block{padding-bottom:40px}.hint{margin-top:18px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;display:flex;gap:12px;font-size:13px}.hint span{color:var(--muted)}

.learning-points{margin:15px 0 0;padding-left:20px;color:#b6bbc3}.learning-points li{margin:9px 0;font-size:14px}.dictionary{margin-top:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.dict-row{display:grid;grid-template-columns:150px 1fr 160px;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px}.dict-row:last-child{border-bottom:0}.dict-row b{font-family:ui-monospace,monospace;color:#f1f2f4}.dict-row span{color:#aeb3bc}.dict-row em{font-style:normal;color:#707680}.dialect-note{font-size:12px;color:#888e98;margin-top:10px}.industry-block{background:linear-gradient(135deg,#101216,#0c0d10);padding:26px;border:1px solid var(--line);border-radius:12px}.practice-section{margin:55px 0;padding:30px;border:1px solid #39201f;border-radius:14px;background:linear-gradient(135deg,#111216,#0c0d10)}.practice-section>h2{font-size:31px;margin-bottom:8px}.mini-playground{margin-top:25px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#07080a}.mini-toolbar{display:flex;align-items:center;gap:9px;padding:12px;border-bottom:1px solid var(--line)}.mini-toolbar span{margin-left:auto;font-size:11px;color:#777d86}.mini-good{color:#48ce87!important}.mini-bad{color:#ff8b83!important}.mini-playground textarea{display:block;width:100%;height:310px;resize:vertical;background:#07080a;border:0;outline:0;color:#e6e7e9;padding:20px;font:13px/1.8 ui-monospace,Consolas,monospace}.mini-result-head{height:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-size:12px}.mini-result-head span{color:#777d86}.mini-result{min-height:110px}.challenge-block{padding-bottom:40px}.hint{margin-top:18px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;display:flex;gap:12px;font-size:13px}.hint span{color:var(--muted)}@media(max-width:800px){.dict-row{grid-template-columns:1fr;gap:4px}.practice-section{padding:20px}}

.data-dictionary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.dictionary-card{padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.dictionary-card b{display:block;margin-bottom:6px}
.dictionary-card span{display:block;color:#9aa0aa;font-size:.9rem;line-height:1.55}
.learning-list{padding-left:20px;color:#b8bcc5;line-height:1.8}
.warning{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.03);color:#c6c9d0;line-height:1.65}
.dialect-note{color:#8e949e;font-size:.88rem;margin-top:10px}
.muted{color:#8e949e}

.critical-practice{margin-top:34px;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;background:#050505;box-shadow:0 16px 45px rgba(0,0,0,.28)}
.critical-head{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px dashed rgba(255,255,255,.18);font-family:"Space Grotesk",sans-serif;font-size:.78rem;letter-spacing:.12em;color:#ff4b5c}
.critical-head span:last-child{color:#77ff4f}
.critical-body{padding:22px}
.cp-label{margin:18px 0 8px;color:#ff4b5c;font-family:"Space Grotesk",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.08em}
.cp-label:first-child{margin-top:0}
.cp-table-card{margin:12px 0 18px}
.cp-table-title{color:#64f3ff;font-family:"Space Grotesk",sans-serif;font-weight:700;margin-bottom:8px}
.cp-table-card small{display:block;color:#7f8792;margin-top:7px}
.cp-table-card .table-wrap{margin:0}
.cp-no-output{padding:14px;border:1px dashed rgba(255,255,255,.12);border-radius:9px;color:#9097a2}
.hint-stack{display:grid;gap:8px}
.hint-btn,.solution-btn{border:1px solid rgba(255,255,255,.13);background:#0b0b0b;color:#e8e9ec;padding:10px 13px;border-radius:8px;text-align:left;cursor:pointer;font:inherit}
.hint-btn:hover,.solution-btn:hover{border-color:rgba(255,75,92,.65)}
.hint-content{display:none;padding:11px 14px;border-left:2px solid #ff4b5c;color:#b8bec8;background:rgba(255,255,255,.025);line-height:1.6}
.hint-content.shown{display:block}
.solution-reveal{margin-top:16px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.14)}
.solution-btn{text-align:center;width:100%;font-weight:700}
#solutionBox{margin-top:14px}
#solutionBox pre{white-space:pre-wrap;overflow:auto;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#020202;color:#f2f3f5}
#cpExplanation{color:#b9bec7;line-height:1.7}
@media(max-width:700px){.critical-head{flex-direction:column}.critical-body{padding:16px}.cp-table-card .table-wrap{overflow-x:auto}}

.worked-example{margin-top:10px}
.worked-table-card{margin:16px 0}
.worked-table-title{font-family:"Space Grotesk",sans-serif;color:#64f3ff;font-weight:700;margin-bottom:8px}
.worked-table-card small{display:block;color:#7f8792;margin-top:7px}
.worked-query-label,.worked-output-label{font-family:"Space Grotesk",sans-serif;color:#ff4b5c;font-size:.76rem;font-weight:700;letter-spacing:.08em;margin:20px 0 8px}

.critical-practice[hidden],.worked-example[hidden]{display:none!important}
.cp-table-card,.worked-table-card{background:#070707;border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:12px}
.cp-table-card .table-wrap,.worked-table-card .table-wrap{overflow-x:auto}
.cp-table-card table,.worked-table-card table{width:100%;min-width:560px;border-collapse:collapse}
.cp-table-card th,.cp-table-card td,.worked-table-card th,.worked-table-card td{padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;white-space:nowrap}
.cp-table-card th,.worked-table-card th{color:#64f3ff;font-weight:700}
.cp-table-card td,.worked-table-card td{color:#d8dbe0}
.cp-table-card small,.worked-table-card small{display:block;color:#7f8792;margin-top:8px}

.explanation-lines{display:grid;gap:9px}
.explanation-lines p{margin:0;color:#c4c8d0;line-height:1.72}
.explanation-lines p::before{content:"→";color:#ff4b5c;margin-right:10px}
.execution-order{margin:0;padding-left:24px;display:grid;gap:9px;color:#c6cad2}
.execution-order li{padding-left:4px;line-height:1.55}
.execution-order b{color:#64f3ff}
.table-explanation{margin-top:14px;padding:14px 16px;border-left:2px solid #ff4b5c;background:rgba(255,255,255,.025);color:#bfc4cc;line-height:1.7}
.interview-editor{margin-top:10px}
.interview-editor textarea{width:100%;min-height:190px;resize:vertical;background:#030303;color:#f3f4f6;border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:16px;font:14px/1.6 "SFMono-Regular",Consolas,monospace;outline:none}
.interview-editor textarea:focus{border-color:rgba(255,75,92,.7)}
.interview-feedback{margin-top:12px;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);line-height:1.5}
.interview-feedback.correct{border-color:rgba(119,255,79,.4);color:#9dff8c}
.interview-feedback.retry{border-color:rgba(255,193,7,.35);color:#ffd166}
.approach-steps{display:grid;gap:10px}
.approach-step{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#070707}
.approach-step>span{min-width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,75,92,.55);color:#ff4b5c;font-weight:700}
.approach-step p{margin:2px 0;color:#c5c9d1;line-height:1.55}
.critical-practice{margin-top:0}

.solution-reveal-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--border,#2a2a2a)}
.hint-btn:disabled,#solutionRevealBtn:disabled{opacity:.45;cursor:not-allowed}
.solution-box{margin-top:14px;padding:18px;overflow:auto;border:1px solid var(--border,#2a2a2a);border-radius:10px;background:#0b0b0b;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.55}

.hint-code{margin:12px 0 0;padding:14px;overflow:auto;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#020202;color:#f2f3f5;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}.hint-content>div{margin-bottom:4px}.hint-btn:disabled{opacity:.42;cursor:not-allowed}

/* DataEngineerX responsive + compiler reliability polish */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{font:inherit;max-width:100%}
pre{max-width:100%;overflow:auto}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:max-content}
.mini-toolbar,.playground-toolbar,.toolbar-left,.hero-actions{flex-wrap:wrap}
.mini-toolbar .btn,.playground-toolbar .btn{white-space:nowrap}
.mini-playground,.interview-editor,.editor-panel,.result-panel,.schema-panel{min-width:0}
.article-layout>article{min-width:0}
@media(max-width:800px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .site-header .container{width:calc(100% - 28px)}
  .nav{left:14px;right:14px;top:64px}
  .article-hero{padding:42px 0 34px}
  .article-hero h1,.page-hero h1{font-size:clamp(34px,9vw,48px);letter-spacing:-1.5px}
  .article-hero p{font-size:16px}
  .section{padding:60px 0}
  .article-layout{gap:28px}
  .article-block{padding-bottom:28px;margin-bottom:28px}
  .article-block h2{font-size:25px}
  .article-block p{font-size:15px}
  .codebox{padding:15px;font-size:12px;line-height:1.65}
  .mini-toolbar{align-items:stretch}
  .mini-toolbar .btn{flex:0 0 auto}
  .mini-toolbar span{width:100%;margin-left:0}
  .mini-playground textarea,.interview-editor textarea{height:280px;min-height:220px;padding:15px;font-size:13px;line-height:1.6}
  .critical-body{padding:16px}
  .critical-head{gap:8px}
  .cp-table-card,.worked-table-card{min-width:0}
  .cp-table-card .table-wrap,.worked-table-card .table-wrap{max-width:100%;overflow-x:auto}
  .table-wrap th,.table-wrap td{padding:9px 11px;font-size:12px}
  .hint-btn{width:100%;text-align:left}
  .solution-reveal-panel{display:flex;flex-direction:column;gap:10px}
  .solution-reveal-panel .btn{width:100%;justify-content:center}
  .solution-box{white-space:pre;overflow:auto;max-width:100%;font-size:12px}
  .info-grid{grid-template-columns:1fr}
  footer .container{flex-direction:column;gap:8px}
}
@media(max-width:480px){
  .container{width:calc(100% - 22px)}
  .nav-wrap{height:64px}
  .brand{font-size:17px;gap:7px}
  .brand-mark{width:29px;height:29px}
  .menu-btn{font-size:22px}
  h2{font-size:29px}
  .hero{padding:58px 0 60px}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{justify-content:center}
  .page-hero{padding:52px 0 30px}
  .article-hero h1,.page-hero h1{font-size:32px}
  .article-hero p{font-size:15px}
  .mini-toolbar .btn{width:100%;justify-content:center}
  .mini-toolbar span{text-align:left}
  .editor-panel textarea{height:250px}
  .mini-playground textarea,.interview-editor textarea{height:240px;min-height:200px}
  .empty-result,.success-result{padding:30px 16px}
  .table-wrap{max-height:360px}
  .critical-body{padding:13px}
  .cp-label{font-size:10px}
}
@media(max-width:360px){
  .container{width:calc(100% - 16px)}
  .brand{font-size:15px}
  .article-hero h1,.page-hero h1{font-size:29px}
  .article-block h2{font-size:23px}
  .codebox,.solution-box{font-size:11px}
  .mini-playground textarea,.interview-editor textarea{font-size:12px}
}

/* Problems */
.problem-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}.problem-toolbar input{flex:1 1 280px;min-width:0}.problem-filters{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{border:1px solid var(--border,#2a2a2a);background:var(--card,#111);color:var(--text,#fff);padding:10px 14px;border-radius:8px;cursor:pointer;font:inherit}.filter-btn.active,.filter-btn:hover{border-color:#e33;color:#fff}.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.problem-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:var(--card,#111);border:1px solid var(--border,#252525);border-radius:14px;padding:22px;transition:transform .18s,border-color .18s}.problem-card:hover{transform:translateY(-2px);border-color:#e33}.problem-card-top,.problem-meta{display:flex;justify-content:space-between;gap:10px;align-items:center}.problem-number{font-family:"Space Grotesk",sans-serif;color:#e33;font-weight:700}.problem-tag{font-size:11px;letter-spacing:.12em;color:#999}.problem-card h3{font-family:"Space Grotesk",sans-serif;font-size:21px;margin:18px 0 10px}.problem-card p{color:#aaa;line-height:1.6;margin:0 0 20px}.problem-meta{font-size:12px;color:#777;border-top:1px solid var(--border,#252525);padding-top:14px;margin-top:auto}.problem-card .arrow{margin-top:18px;color:#fff;font-weight:600}.empty-state{padding:50px 20px;text-align:center;color:#888;border:1px dashed #333;border-radius:12px}@media(max-width:900px){.problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.problem-grid{grid-template-columns:1fr}.problem-toolbar{align-items:stretch}.problem-filters{width:100%}.filter-btn{flex:1}.problem-card{padding:18px}}
/* Multi-language Problems */
.problem-detail{padding:48px 0 80px}.back-link{display:inline-block;color:#aaa;text-decoration:none;margin-bottom:30px}.back-link:hover{color:#fff}.problem-header{max-width:900px;padding:20px 0 42px}.problem-header h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,6vw,64px);margin:10px 0 14px;letter-spacing:-2px}.problem-header p{font-size:17px;line-height:1.75;color:#aaa;max-width:760px}.problem-status{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.problem-status span,.problem-side-card span{border:1px solid var(--border,#292929);border-radius:999px;padding:7px 11px;font-size:12px;color:#aaa}.problem-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.problem-main{min-width:0}.problem-section{border-top:1px solid var(--border,#292929);padding:34px 0}.problem-section h2{font-family:"Space Grotesk",sans-serif;margin:8px 0 12px}.problem-section>p{color:#aaa;line-height:1.7}.problem-table-block{margin-top:24px}.problem-table-block h3{font-size:16px;margin-bottom:10px}.problem-editor{display:block;width:100%;min-height:300px;box-sizing:border-box;background:#080808;color:#eee;border:1px solid #2b2b2b;border-radius:10px;padding:18px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;outline:none}.problem-editor:focus{border-color:#777}.problem-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.run-status{color:#aaa;font-size:13px}.problem-result{margin-top:16px;min-height:20px}.error-box{white-space:pre-wrap;overflow:auto;padding:16px;border:1px solid #633;border-radius:9px;background:#160b0b;color:#ffb4b4}.empty-result{padding:20px;border:1px dashed #333;border-radius:9px;color:#999}.hint-item{border-bottom:1px solid #222;padding:12px 0}.hint-btn{background:transparent;border:1px solid #333;color:#ddd;border-radius:8px;padding:10px 13px;cursor:pointer}.hint-btn:hover:not(:disabled){border-color:#e33}.hint-content{padding:4px 4px 8px;color:#aaa;line-height:1.7}.hint-code{white-space:pre;overflow:auto;background:#070707;border:1px solid #292929;padding:15px;border-radius:8px;color:#eee}.problem-side-card{position:sticky;top:90px;border:1px solid #292929;background:#111;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}.problem-side-card strong{font-family:"Space Grotesk",sans-serif;font-size:20px}.problem-side-card hr{border:0;border-top:1px solid #292929;width:100%}.problem-side-card p{color:#999;line-height:1.6;font-size:13px}.muted{color:#888}@media(max-width:800px){.problem-layout{grid-template-columns:1fr}.problem-side-card{position:static}.problem-detail{padding-top:32px}}@media(max-width:480px){.problem-header h1{font-size:34px}.problem-editor{min-height:240px;padding:14px;font-size:12px}.problem-section{padding:28px 0}.problem-actions .btn{width:100%;justify-content:center}.problem-actions .run-status{width:100%}}

/* Problems language landing */
.problems-language-section{padding-top:34px}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.section-heading h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,4vw,42px);margin:8px 0 0}.section-subtitle{max-width:480px;color:#999;line-height:1.7;margin:0}.language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.language-card{position:relative;display:flex;flex-direction:column;min-height:310px;padding:28px;text-decoration:none;color:inherit;background:linear-gradient(145deg,#121212,#0d0d0d);border:1px solid #292929;border-radius:16px;overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease}.language-card:before{content:"";position:absolute;inset:auto -20% -55% 45%;height:190px;background:radial-gradient(circle,rgba(220,50,50,.10),transparent 65%);pointer-events:none}.language-card:hover{transform:translateY(-4px);border-color:#a62b2b;background:#131313}.language-card-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.language-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid #3a3a3a;border-radius:12px;font:700 18px "Space Grotesk",sans-serif;color:#fff}.language-kicker{font-size:10px;letter-spacing:.18em;color:#777}.language-card h3{position:relative;font:700 clamp(30px,4vw,42px) "Space Grotesk",sans-serif;margin:28px 0 10px}.language-card p{position:relative;color:#aaa;line-height:1.7;max-width:580px;margin:0 0 24px}.language-stats{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid #252525;color:#777;font-size:12px}.language-stats span{padding-right:10px}.language-stats strong{color:#eee;font-size:16px}.language-action{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-weight:700;color:#fff}.language-action span{font-size:20px;color:#e33}@media(max-width:760px){.section-heading{display:block}.section-subtitle{margin-top:12px}.language-grid{grid-template-columns:1fr}.language-card{min-height:280px;padding:22px}}@media(max-width:430px){.language-card h3{font-size:32px}.language-stats{gap:7px}.language-stats span{width:calc(50% - 8px)}}
.problem-list-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin:28px 0}.problem-list-head h2{font:700 clamp(30px,4vw,44px) "Space Grotesk",sans-serif;margin:8px 0}.problem-list-head .problem-toolbar{margin-top:0;min-width:min(560px,100%)}.problem-list-head .input{background:#111;border:1px solid #292929;color:#fff;border-radius:8px;padding:11px 13px;min-height:44px}.problem-list-head .input:focus{outline:none;border-color:#a62b2b}@media(max-width:850px){.problem-list-head{display:block}.problem-list-head .problem-toolbar{margin-top:18px;min-width:0}}
.problem-pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px}.problem-pager span{color:#999;font-size:14px;min-width:110px;text-align:center}.problem-pager button:disabled{opacity:.35;cursor:not-allowed}.problem-pager button:disabled:hover{border-color:#292929;color:#fff}@media(max-width:520px){.problem-pager{gap:8px}.problem-pager span{font-size:12px;min-width:80px}.problem-pager .filter-btn{flex:0 1 auto;padding:9px 10px}}

/* V23 problem-platform layout: DataLemur-style question + fixed compiler */
.problem-container{max-width:1400px}
.problem-shell{border:1px solid var(--border,#242424);background:#fff;color:#171717;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.problem-topbar{padding:22px 26px 16px;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.problem-topbar h1{margin:5px 0 0;font-size:30px;line-height:1.15;color:#111}
.problem-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.problem-meta span{font-size:12px;padding:6px 9px;border:1px solid #ddd;border-radius:6px;color:#555;background:#fafafa}
.problem-tabs{display:flex;border-bottom:1px solid #ddd;padding:0 18px;gap:4px}.p-tab{border:0;background:none;padding:13px 15px;color:#666;font-weight:600;border-bottom:2px solid transparent;cursor:pointer}.p-tab.active{color:#111;border-bottom-color:#111}
.problem-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,48%);min-height:780px}.problem-content{padding:28px 30px 70px;max-width:900px}.p-panel{display:none}.p-panel.active{display:block}.problem-content h2{font-size:19px;margin:27px 0 10px;color:#111}.problem-content h3{font-size:14px;margin:18px 0 8px}.problem-content p{line-height:1.65;color:#3f3f3f}.problem-content .lead{font-size:15px;color:#222}.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#777;font-weight:700}.assumptions{padding-left:20px;color:#444;line-height:1.7}.assumptions li{margin:4px 0}
.data-block{margin:10px 0 18px}.table-wrap{overflow:auto;border:1px solid #ddd;border-radius:4px;background:#fff}.table-wrap table{border-collapse:collapse;width:max-content;min-width:100%}.table-wrap th,.table-wrap td{padding:8px 11px;border-bottom:1px solid #eee;text-align:left;font-size:12px;white-space:nowrap}.table-wrap th{background:#f7f7f7;font-weight:700;color:#333}.schema-table{width:min(100%,520px);margin:8px 0 18px}.schema-table table{border-collapse:collapse;width:100%;border:1px solid #ddd}.schema-table th,.schema-table td{padding:7px 9px;border:1px solid #e5e5e5;text-align:left;font-size:12px}.schema-table th{background:#f6f6f6}
.hint-section{margin-top:28px}.hint-item{border-top:1px solid #e7e7e7;padding:13px 0}.hint-btn{border:1px solid #ccc;background:#fff;padding:7px 11px;border-radius:5px;font-weight:700;cursor:pointer}.hint-btn:disabled{opacity:.45;cursor:not-allowed}.hint-content{padding:7px 0 2px}.hint-content pre,.final-code{background:#f4f4f4;border:1px solid #e2e2e2;border-radius:4px;padding:13px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#222;white-space:pre-wrap}
.compiler-panel{position:sticky;top:0;height:780px;align-self:start;border-left:1px solid #ddd;background:#fff;display:flex;flex-direction:column;min-width:0}.compiler-head{height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;border-bottom:1px solid #ddd;background:#fafafa}.compiler-head strong{display:block;font-size:12px}.compiler-head span{font-size:10px;color:#777}.icon-btn{border:0;background:none;font-size:20px;cursor:pointer;color:#666}.compiler-panel textarea{flex:1;min-height:420px;width:100%;resize:none;border:0;outline:0;padding:16px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;color:#111;box-sizing:border-box}.compiler-actions{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #ddd}.run-btn,.clear-btn{border:1px solid #bbb;background:#fff;border-radius:5px;padding:8px 14px;font-weight:700;cursor:pointer}.run-btn{background:#111;color:#fff;border-color:#111}.output-head{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#fafafa}.output-head strong{font-size:12px}.output-head span{font-size:11px;color:#555}.compiler-result{min-height:210px;max-height:300px;overflow:auto;padding:12px}.result-status{font-size:11px;color:#555;margin-bottom:8px}.error-box,.success-box,.empty-result{padding:12px;border:1px solid #ddd;background:#fafafa;border-radius:4px;font-size:12px;white-space:pre-wrap}.error-box{color:#a11}.success-box{color:#185c37}.back-link{display:inline-block;margin:18px 0;color:#555;font-size:13px}
@media(max-width:900px){.problem-workspace{grid-template-columns:1fr}.compiler-panel{position:relative;top:auto;height:650px;border-left:0;border-top:1px solid #ddd}.problem-content{max-width:none}.problem-topbar{flex-direction:column}.problem-meta{justify-content:flex-start}}
@media(max-width:600px){.problem-container{padding:0 10px}.problem-topbar{padding:18px 16px}.problem-topbar h1{font-size:23px}.problem-tabs{padding:0 8px;overflow:auto}.p-tab{padding:11px 12px;white-space:nowrap}.problem-content{padding:20px 16px 50px}.problem-workspace{min-height:0}.compiler-panel{height:600px}.compiler-panel textarea{min-height:250px}.compiler-result{max-height:240px}.table-wrap th,.table-wrap td{font-size:11px;padding:7px 8px}.problem-content h2{font-size:17px}}


/* V24 — modern problem workspace */
.problem-detail{background:#08090b;min-height:calc(100vh - 72px);padding:26px 0 70px}
.problem-container{max-width:1500px}
.problem-detail .back-link{color:#8f949e;margin:0 0 18px;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.problem-detail .back-link:hover{color:#fff}
.problem-shell{background:#0d0f12!important;color:#f3f4f6!important;border:1px solid #20242b!important;border-radius:18px!important;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.35)!important}
.problem-topbar{padding:26px 30px 22px!important;background:linear-gradient(135deg,#111419,#0d0f12)!important;border-bottom:1px solid #20242b!important}
.problem-topbar h1{color:#f7f7f8!important;font:700 clamp(28px,4vw,46px)/1.08 "Space Grotesk",sans-serif!important;letter-spacing:-1.4px!important;margin-top:9px!important}
.problem-topbar .eyebrow{color:#e24a4a!important;letter-spacing:.16em}
.problem-meta span{background:#15181d!important;border-color:#292e36!important;color:#aeb4bf!important;border-radius:999px!important;padding:7px 11px!important}
.problem-tabs{background:#0d0f12!important;border-bottom:1px solid #20242b!important;padding:0 24px!important;gap:2px!important}
.p-tab{color:#8e949f!important;padding:14px 17px!important;border-bottom:2px solid transparent!important}
.p-tab:hover{color:#fff!important}
.p-tab.active{color:#fff!important;border-bottom-color:#e33!important}
.problem-workspace{grid-template-columns:minmax(0,1fr) minmax(430px,46%)!important;background:#0b0d10}
.problem-content{padding:32px 34px 70px!important;max-width:960px!important}
.problem-content h2{color:#f3f4f6!important;font-size:21px!important;margin-top:34px!important}
.problem-content h3{color:#dfe2e7!important}
.problem-content p,.assumptions{color:#a7adb7!important}
.problem-content .lead{color:#d7dbe1!important;font-size:16px!important}
.p-panel{animation:problemFade .18s ease-out}
@keyframes problemFade{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
.schema-table,.data-block{background:#101318;border:1px solid #242a33;border-radius:12px;padding:14px;margin-top:14px}
.table-wrap{border:1px solid #242a33!important;border-radius:10px;overflow:auto;background:#0b0d10}
.table-wrap table,.schema-table table{width:100%;border-collapse:collapse}
.table-wrap th,.schema-table th{background:#15181d!important;color:#aeb4bf!important;font-weight:600}
.table-wrap td,.table-wrap th,.schema-table td,.schema-table th{border-bottom:1px solid #20242b!important;padding:10px 12px!important;text-align:left;white-space:nowrap}
.table-wrap td,.schema-table td{color:#d8dce2!important}
.table-wrap tr:last-child td,.schema-table tr:last-child td{border-bottom:0!important}
.hint-section{margin-top:36px;padding:20px;border:1px solid #242a33;border-radius:14px;background:linear-gradient(145deg,#101318,#0d0f12)}
.hint-section h2{margin-top:0!important}
.hint-item{border-bottom:1px solid #242a33!important;padding:14px 0!important}
.hint-item:last-child{border-bottom:0!important}
.hint-btn{background:#15181d!important;border-color:#303640!important;color:#e8eaee!important;border-radius:9px!important}
.hint-btn:not(:disabled):hover{border-color:#e33!important;background:#191c21!important}
.hint-btn:disabled{opacity:.45}
.hint-content{color:#aab0ba!important}
.hint-content pre,.final-code{background:#07090b!important;border:1px solid #242a33!important;color:#f0f2f4!important;border-radius:10px!important;padding:16px!important;overflow:auto}
.compiler-panel{background:#090b0e!important;border-left:1px solid #20242b!important;position:sticky!important;top:0!important;height:calc(100vh - 72px)!important;min-height:720px!important;display:flex;flex-direction:column}
.compiler-head{padding:16px 18px!important;border-bottom:1px solid #20242b!important;background:#101318!important;display:flex;justify-content:space-between;align-items:center}
.compiler-head strong,.output-head strong{color:#f2f3f5!important}
.compiler-head span{display:block;color:#777f8c;font-size:11px;margin-top:3px}
.icon-btn{background:#171a20!important;border:1px solid #2a3039!important;color:#c9ced6!important;border-radius:8px!important}
.compiler-panel textarea{flex:1!important;width:100%!important;min-height:420px!important;resize:none!important;box-sizing:border-box!important;background:#080a0d!important;color:#e8ebef!important;border:0!important;border-bottom:1px solid #20242b!important;border-radius:0!important;padding:20px!important;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;outline:none!important}
.compiler-panel textarea:focus{box-shadow:inset 0 0 0 1px #343b45!important}
.compiler-actions{display:flex;gap:9px;padding:12px 14px;background:#101318;border-bottom:1px solid #20242b}
.run-btn,.clear-btn{border-radius:9px!important;padding:10px 15px!important;font-weight:700!important;cursor:pointer}
.run-btn{background:#e33!important;color:#fff!important;border:1px solid #e33!important}
.run-btn:hover{background:#c92e2e!important}
.clear-btn{background:#171a20!important;color:#d6dae0!important;border:1px solid #2a3039!important}
.output-head{padding:12px 16px!important;background:#101318;border-bottom:1px solid #20242b;display:flex;justify-content:space-between;gap:10px}
#runStatus{color:#89919d;font-size:12px}
.compiler-result{padding:14px;overflow:auto;max-height:38vh;background:#090b0e}
.compiler-result .table-wrap{border-color:#242a33!important}
.result-status{color:#8f97a3;font-size:12px;margin-bottom:9px}
.success-box{padding:14px;border:1px solid #294c38;border-radius:9px;background:#0c1711;color:#a9d7b8}
.error-box{background:#180d10!important;border-color:#54252c!important;color:#ffb5be!important;border-radius:9px!important}
.muted{color:#7f8792!important}
@media(max-width:1100px){.problem-workspace{grid-template-columns:minmax(0,1fr) minmax(380px,44%)!important}.problem-content{padding:28px!important}}
@media(max-width:900px){.problem-workspace{grid-template-columns:1fr!important}.compiler-panel{position:relative!important;height:620px!important;min-height:0!important;border-left:0!important;border-top:1px solid #20242b!important}.compiler-panel textarea{min-height:270px!important}.compiler-result{max-height:230px!important}.problem-topbar{padding:22px!important}}
@media(max-width:600px){.problem-detail{padding:14px 0 45px}.problem-container{padding:0 10px}.problem-shell{border-radius:13px!important}.problem-topbar{padding:20px 17px!important}.problem-topbar h1{font-size:28px!important}.problem-meta{justify-content:flex-start!important}.problem-tabs{padding:0 10px!important}.p-tab{padding:12px 13px!important}.problem-content{padding:22px 17px 50px!important}.problem-content h2{font-size:19px!important}.compiler-panel{height:590px!important}.compiler-panel textarea{min-height:250px!important;padding:15px!important;font-size:12px!important}.compiler-actions{position:sticky;bottom:0;z-index:2}.run-btn,.clear-btn{flex:1}.hint-section{padding:15px}.schema-table,.data-block{padding:9px}.table-wrap th,.table-wrap td,.schema-table th,.schema-table td{font-size:11px!important;padding:8px 9px!important}}

/* V25 strong interview problem workspace */
.problem-detail{background:#07090c;min-height:calc(100vh - 72px);padding:28px 0 60px}.problem-container{max-width:1500px}.back-link{display:inline-flex;margin-bottom:18px;color:#aab2bd;text-decoration:none}.strong-problem{border:1px solid #242a33;border-radius:18px;background:#0b0e13;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.28)}.problem-heading{padding:28px 32px;border-bottom:1px solid #242a33;background:linear-gradient(135deg,#0d1117,#090b0f)}.problem-kicker{font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#ff4d6d}.problem-kicker span{color:#737d89}.problem-heading h1{margin:10px 0 14px;font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,48px);line-height:1.05}.problem-badges{display:flex;flex-wrap:wrap;gap:8px}.problem-badges span{padding:6px 10px;border-radius:999px;border:1px solid #303744;color:#aeb7c3;background:#11151b;font-size:12px}.problem-badges .easy{color:#6ee7a1;border-color:#214d38}.problem-badges .medium{color:#ffd166;border-color:#5b4920}.problem-badges .hard{color:#ff6b7f;border-color:#5b2630}.interview-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,48%);align-items:start}.question-pane{padding:8px 32px 40px}.case-section{padding:24px 0;border-bottom:1px solid #222832}.case-section:last-child{border-bottom:0}.section-label{font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;margin-bottom:12px}.section-label.red{color:#ff4d6d}.section-label.cyan{color:#49d8ff}.section-label.green{color:#65e58d}.section-label.yellow{color:#ffd166}.section-label.pink{color:#ff5f9f}.section-label.purple{color:#b99cff}.case-section p{color:#d5dbe3;line-height:1.75;margin:0;max-width:920px}.case-section ul{margin:0;padding-left:22px;color:#b8c1cc;line-height:1.75}.task-box{background:#0e131a;border:1px solid #26303c;border-radius:12px;padding:20px;margin:18px 0}.allowed{margin-top:14px;padding:10px 12px;background:#090c10;border-left:3px solid #49d8ff;color:#8995a3;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.schema-card,.case-table{margin:12px 0 18px}.schema-name,.case-table-title{font-weight:700;color:#f0f3f6;margin-bottom:8px}.table-wrap{overflow:auto;max-width:100%;border:1px solid #262d37;border-radius:10px}.table-wrap table{width:100%;border-collapse:collapse;min-width:560px}.table-wrap th,.table-wrap td{padding:10px 12px;text-align:left;border-bottom:1px solid #202631;white-space:nowrap}.table-wrap th{background:#11161d;color:#8fe9ff;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.05em}.table-wrap td{color:#c8d0da;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}.table-wrap tr:last-child td{border-bottom:0}.explanation-box{border:1px solid #51263a;background:#110c12;padding:18px;border-radius:12px;margin:18px 0}.hints-box{padding-top:28px}.hint-intro{color:#8995a3!important;font-size:13px;margin-bottom:16px!important}.hint-row{margin:10px 0;border:1px solid #262e39;border-radius:12px;overflow:hidden;background:#0d1117}.hint-btn{width:100%;border:0;background:#111720;color:#e5e9ee;text-align:left;padding:13px 15px;font-weight:700;cursor:pointer}.hint-btn:not(:disabled):hover{background:#18202b}.hint-btn:disabled{opacity:.55;cursor:not-allowed}.hint-content{padding:14px;border-top:1px solid #252d38}.hint-content p{font-size:13px;color:#aab4c0;margin-bottom:12px}.hint-content pre,.final-code{overflow:auto;margin:0;background:#070a0e;border:1px solid #202731;border-radius:9px;padding:15px;color:#d8e0e8;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}.solution-section{margin-top:18px}.editor-pane{position:sticky;top:84px;min-width:0;border-left:1px solid #242a33;background:#080b0f;min-height:calc(100vh - 100px);padding:18px}.editor-card{border:1px solid #29313c;border-radius:14px;overflow:hidden;background:#0b0f14;box-shadow:0 14px 40px rgba(0,0,0,.22)}.editor-head{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid #242b34}.editor-head strong{display:block;color:#eef2f6;font-size:14px}.editor-head span{display:block;color:#6f7a87;font-size:11px;margin-top:4px}.icon-btn{border:1px solid #303844;background:#12171e;color:#aeb8c4;border-radius:8px;width:34px;height:34px;cursor:pointer}.editor-card textarea{display:block;width:100%;min-height:430px;resize:vertical;border:0;outline:0;background:#07090d;color:#d8dee7;padding:18px;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;box-sizing:border-box}.editor-actions{display:flex;gap:9px;padding:12px;border-top:1px solid #242b34}.run-btn,.clear-btn{border:0;border-radius:8px;padding:10px 15px;font-weight:800;cursor:pointer}.run-btn{background:#e8edf2;color:#0a0d11}.clear-btn{background:#171c24;color:#aeb7c3;border:1px solid #2b3440}.output-head{display:flex;justify-content:space-between;padding:13px 15px;border-top:1px solid #242b34;border-bottom:1px solid #242b34;color:#8b96a3;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}.compiler-result{min-height:180px;padding:12px}.empty-result,.success-box,.error-box{padding:14px;border-radius:9px;background:#0f141b;color:#929daa;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.success-box{color:#76e2a0;border:1px solid #214d38}.error-box{color:#ff8797;border:1px solid #572632;white-space:pre-wrap}.result-status{color:#76e2a0;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:10px}.compiler-result .table-wrap table{min-width:420px}
@media(max-width:1050px){.interview-layout{grid-template-columns:1fr}.editor-pane{position:relative;top:auto;border-left:0;border-top:1px solid #242a33;min-height:auto}.editor-card{max-width:none}.question-pane{padding-left:22px;padding-right:22px}.problem-heading{padding:24px 22px}}
@media(max-width:640px){.problem-detail{padding:14px 0 35px}.problem-container{padding:0 10px}.problem-heading{padding:20px 16px}.problem-heading h1{font-size:28px}.question-pane{padding:0 16px 25px}.case-section{padding:19px 0}.editor-pane{padding:10px}.editor-card textarea{min-height:300px;font-size:13px}.table-wrap table{min-width:520px}.case-section p{font-size:14px}.problem-badges span{font-size:11px}.back-link{font-size:13px}}

/* V26 reliable progressive hints */
.hint-btn{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}.hint-btn .hint-state{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#788392}.hint-btn.opened{border-left:3px solid #65e58d!important}.hint-btn:not(:disabled) .hint-state{color:#b99cff}.hint-content[style*="display: block"]{display:block!important}.hint-content{animation:hintIn .16s ease-out}@keyframes hintIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

/* V27 problem navigation + readable SQL code blocks */
.code-block,
.hint-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 18px 20px !important;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #29313c !important;
  border-radius: 10px !important;
  background: #070a0e !important;
  font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  white-space: pre !important;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
.code-block code,
.hint-code code {
  white-space: pre !important;
  font: inherit;
}
/* Prism colors tuned for the DataEngineerX dark workspace. */
.code-block .token.comment { color: #6f7d8d; }
.code-block .token.keyword { color: #ff6b8a; }
.code-block .token.function { color: #62d8ff; }
.code-block .token.string { color: #9be58c; }
.code-block .token.number { color: #ffd166; }
.code-block .token.operator,
.code-block .token.punctuation { color: #b8c2ce; }
.code-block .token.boolean { color: #c5a3ff; }

.problem-navigation {
  border-top: 1px solid #242a33;
  padding: 18px 24px;
  background: #090c10;
}
.problem-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.problem-nav-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 17px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.problem-nav-btn:hover { transform: translateY(-1px); }
.problem-nav-btn.secondary {
  color: #b7c0cb;
  border: 1px solid #2c3440;
  background: #11161d;
}
.problem-nav-btn.primary {
  color: #0a0d11;
  border: 1px solid #e8edf2;
  background: #e8edf2;
  margin-left: auto;
}
.problem-nav-btn.primary strong { font-size: 18px; }
.problem-nav-end { margin-left: auto; color: #6f7a87; font-size: 12px; }
@media(max-width:640px){
  .problem-navigation { padding: 14px 16px; }
  .problem-nav-inner { gap: 10px; }
  .problem-nav-btn { flex: 1; min-width: 0; padding: 0 12px; font-size: 12px; }
  .problem-nav-btn.primary { margin-left: 0; }
  .problem-nav-btn.secondary { max-width: 48%; }
  .code-block, .hint-code { padding: 14px 15px !important; font-size: 12px !important; line-height: 1.7 !important; }
}

/* V28 — stable problem workspace */
.strong-problem{isolation:isolate}
.problem-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.heading-main{min-width:0}.case-progress{flex:0 0 auto;min-width:72px;padding:12px 14px;border:1px solid #2b3440;border-radius:12px;background:#0a0d12;text-align:center;color:#f0f3f6}.case-progress span{display:block;font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.case-progress small{color:#778290;font-size:10px;letter-spacing:.08em}
.badge-language{color:#ff667f!important;border-color:#5a2935!important}
.interviewer-section{background:linear-gradient(90deg,rgba(255,77,109,.035),transparent 60%)}
.section-note{color:#7f8a97!important;font-size:12px!important;margin-bottom:14px!important}
.data-card{border:1px solid #252d37;border-radius:12px;background:#0c1016;overflow:hidden;margin:12px 0 18px}.data-card-head{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-bottom:1px solid #252d37}.data-card-head strong{color:#eef2f6;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}.data-card-head span{color:#697582;font-size:11px}.schema-card{border:1px solid #252d37;border-radius:12px;padding:12px;background:#0c1016}
.output-table{margin-top:8px}.result-status.correct{color:#6ee7a1}.result-status.different{color:#ffd166}
.code-shell{margin-top:12px;border:1px solid #28313c;border-radius:11px;overflow:hidden;background:#070a0e}.code-toolbar{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 13px;border-bottom:1px solid #202731;background:#0d1218}.code-toolbar span{color:#778493;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.08em}.copy-code{border:1px solid #2c3642;border-radius:7px;background:#141a21;color:#aeb8c4;padding:5px 9px;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.copy-code:hover{border-color:#ff526f;color:#fff}.code-block{border:0!important;border-radius:0!important;margin:0!important;background:#070a0e!important;padding:16px 18px!important;min-height:0}.code-block code{font-size:13px!important;line-height:1.75!important}
.hint-row{transition:border-color .18s ease,transform .18s ease}.hint-row:has(.hint-btn:not(:disabled)){border-color:#4b385f}.hint-btn{min-height:54px!important;padding:0 16px!important}.hint-btn.opened{background:#101820!important}.hint-content[hidden]{display:none!important}.solution-area{margin-top:20px;padding:18px;border:1px solid #244b35;border-radius:13px;background:linear-gradient(180deg,#0d1711,#0b100d)}.solution-area .section-label{margin-bottom:7px}.solution-area p{font-size:13px!important;color:#9aa7b4!important}
.editor-meta{display:flex;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid #202731;color:#65717f;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.editor-card textarea{font-variant-ligatures:none;tab-size:2}
.problem-navigation{position:relative}.problem-nav-inner{max-width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.problem-nav-btn{min-width:145px}.problem-nav-btn.primary{justify-self:end}.problem-nav-btn.secondary{justify-self:start}.problem-nav-btn small{display:block;color:#74808c;font-size:9px;line-height:1.1;text-transform:uppercase;letter-spacing:.08em}.problem-nav-btn.primary small{color:#58636f}.problem-nav-index{color:#697582;text-decoration:none;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace}.problem-nav-index:hover{color:#e8edf2}.problem-nav-end{justify-self:end}
@media(max-width:1050px){.interview-layout{grid-template-columns:1fr}.editor-pane{padding:18px}.editor-card{position:relative}.case-progress{display:none}}
@media(max-width:640px){.problem-heading{display:block}.problem-heading h1{font-size:26px!important;line-height:1.15}.problem-kicker{font-size:10px}.problem-badges{gap:6px}.problem-badges span{padding:5px 8px}.question-pane{padding:0 14px 24px!important}.editor-pane{padding:10px}.editor-head{padding:12px}.editor-meta{flex-direction:column;gap:3px}.editor-card textarea{min-height:280px!important;font-size:12px!important}.code-block code{font-size:11px!important}.code-block{padding:13px!important}.problem-nav-inner{grid-template-columns:1fr 1fr;gap:9px}.problem-nav-index{display:none}.problem-nav-btn{min-width:0;width:100%;font-size:11px}.problem-nav-btn.primary{justify-self:stretch}.problem-nav-btn.secondary{justify-self:stretch}.problem-nav-end{grid-column:1/-1;justify-self:center}.data-card-head{padding:10px}.table-wrap table{min-width:480px}.section-note{font-size:11px!important}}

/* V29 — solution breakdown + polished problem navigation */
.hint-title{display:flex;align-items:center;gap:12px;min-width:0}.hint-title b{font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#f0f3f6;white-space:nowrap}.hint-title em{font-style:normal;font-size:12px;color:#778493;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hint-content{background:#0b0f14}.hint-explanation{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-bottom:4px}.hint-explanation span{margin-top:2px;padding:4px 7px;border:1px solid #303947;border-radius:5px;color:#8e9aaa;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.hint-explanation p{margin:0!important;color:#b9c3ce!important;line-height:1.65!important}.solution-area{position:relative;overflow:hidden}.solution-area:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:#65e58d}.solution-breakdown{display:grid;gap:8px;margin:16px 0}.solution-step{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 12px;border:1px solid #24352b;border-radius:9px;background:#0a120d}.solution-step-num{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#14231a;color:#65e58d;font:800 10px ui-monospace,monospace}.solution-step strong,.solution-step span{display:block}.solution-step strong{color:#dce9e0;font-size:12px;margin-bottom:3px}.solution-step span{color:#81908a;font-size:11px;line-height:1.5}.problem-navigation{margin-top:0;padding:22px 26px 26px;background:linear-gradient(180deg,#090c10,#07090c)}.problem-nav-inner{gap:16px}.problem-nav-btn{min-height:58px;padding:0 18px;border-radius:12px}.problem-nav-btn.secondary{justify-content:flex-start}.problem-nav-btn.primary{justify-content:space-between;min-width:190px}.problem-nav-btn > span:first-child{font-size:18px}.problem-nav-btn small{margin-bottom:4px}.problem-nav-index{padding:7px 11px;border:1px solid #242d38;border-radius:999px;background:#0e1319}.problem-nav-btn.primary:hover{box-shadow:0 8px 24px rgba(232,237,242,.12)}.problem-nav-btn.secondary:hover{background:#151b23}.problem-nav-end{padding:11px 15px;border:1px solid #2b3440;border-radius:10px;background:#10151b}
@media(max-width:640px){.hint-title em{display:none}.hint-btn{min-height:58px!important}.hint-explanation{grid-template-columns:1fr;gap:7px}.hint-explanation span{width:max-content}.solution-step{grid-template-columns:30px 1fr}.problem-navigation{padding:18px 14px 20px}.problem-nav-inner{grid-template-columns:1fr 1fr}.problem-nav-btn{min-height:54px}.problem-nav-index{grid-column:1/-1;grid-row:1;justify-self:center}.problem-nav-btn.secondary{grid-column:1;grid-row:2}.problem-nav-btn.primary{grid-column:2;grid-row:2;min-width:0}.problem-nav-end{grid-column:1/-1}}

/* V30 — polished progressive hint experience */
.hints-box .hint-row{background:#0b0f14;border:1px solid #27303b;border-radius:14px;margin:12px 0;transition:border-color .18s ease,box-shadow .18s ease}
.hints-box .hint-row:has(.hint-content:not([hidden])){border-color:#3a4654;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.hints-box .hint-btn{min-height:62px;padding:14px 16px;background:#10151c}
.hints-box .hint-btn:not(:disabled):hover{background:#151c25}
.hints-box .hint-btn.opened{background:#0f1714}
.hints-box .hint-title{display:flex;align-items:baseline;gap:12px;min-width:0}
.hints-box .hint-title b{font-size:14px;color:#f1f4f7;white-space:nowrap}
.hints-box .hint-title em{font-style:normal;font-size:12px;font-weight:500;color:#8793a1;overflow:hidden;text-overflow:ellipsis}
.hints-box .hint-state{flex:0 0 auto;padding:5px 8px;border-radius:999px;border:1px solid #303946;background:#0b0f14}
.hints-box .hint-btn:not(:disabled) .hint-state{border-color:#51426f;color:#c2adff;background:#16121e}
.hints-box .hint-content{padding:18px 16px 17px;background:#0b0e13}
.hints-box .hint-explanation{margin-bottom:14px;padding:13px 14px;border-left:2px solid #9f82ff;background:#0e1218;border-radius:0 9px 9px 0}
.hints-box .hint-explanation span{display:block;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#a88aff;margin-bottom:6px}
.hints-box .hint-explanation p{margin:0!important;color:#b8c1cc!important;line-height:1.7!important}
.hints-box .code-shell{margin-top:12px}
.hints-box .code-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #252d37;border-bottom:0;border-radius:9px 9px 0 0;background:#10151b;color:#73808d;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.hints-box .copy-code{border:1px solid #303946;background:#151b23;color:#bfc8d2;border-radius:7px;padding:5px 8px;font-size:10px;cursor:pointer}
.hints-box .code-block{margin:0!important;border-radius:0 0 9px 9px!important;border-top:0!important}
.solution-area{margin-top:22px;padding:20px;border:1px solid #2e4b39;border-radius:15px;background:linear-gradient(180deg,#0d1511,#0b0f0d)}
.solution-breakdown{display:grid;gap:8px;margin:15px 0 18px}
.solution-step{display:grid;grid-template-columns:32px 1fr;gap:11px;padding:11px 12px;border:1px solid #26332b;border-radius:10px;background:#0d1410}
.solution-step-num{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#17301f;color:#78e3a0;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace}
.solution-step strong{display:block;color:#e3ebe6;font-size:12px;margin-bottom:3px}.solution-step span{display:block;color:#89958e;font-size:11px;line-height:1.55}
@media(max-width:640px){.hints-box .hint-title{display:block}.hints-box .hint-title em{display:block;margin-top:3px}.hints-box .hint-btn{align-items:flex-start!important}.hints-box .hint-state{margin-top:1px}.solution-area{padding:15px}}
/* V31 reference-style hint presentation */
.hints-box .hint-row{margin-top:14px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#10141a;overflow:hidden}
.hints-box .hint-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:transparent;border:0;color:#f3f5f7;text-align:left;cursor:pointer}
.hints-box .hint-btn:disabled{cursor:default;opacity:.58}
.hints-box .hint-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hints-box .hint-title b{font-size:16px}.hints-box .hint-title em{font-style:normal;color:#8f9baa;font-size:13px}
.hints-box .hint-state{font-size:12px;color:#9aa5b2;white-space:nowrap}.hints-box .hint-btn:not(:disabled):hover{background:rgba(255,255,255,.035)}
.hints-box .hint-btn.opened{border-bottom:1px solid rgba(255,255,255,.08)}
.hint-content{padding:18px 20px 22px}.hint-copy{max-width:850px}.hint-step-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b9c2ce;margin-bottom:9px;font-weight:700}.hint-copy p{margin:0;color:#b6bfca;line-height:1.75;font-size:14px}
.hint-content .code-shell{margin-top:16px}.hint-content .code-block{font-size:13px;line-height:1.65;white-space:pre;overflow:auto;tab-size:2}

/* V32 hint-wise solution flow */
.hint-content{display:block;padding:18px 20px 20px;border-top:1px solid rgba(255,255,255,.08)}
.hint-copy p{max-width:78ch;line-height:1.75}
.hint-step-label{font-weight:700;margin-bottom:8px}
.hint-row + .hint-row{margin-top:12px}
.hint-btn:disabled{cursor:not-allowed}
.code-shell{margin-top:14px;overflow:hidden;border-radius:12px}
.code-block{white-space:pre;overflow:auto;line-height:1.65;font-size:.9rem;margin:0}

/* V33 workspace behavior: independently scroll the question column while keeping the compiler visible. */
@media (min-width:901px){
  .problem-detail{overflow:hidden;}
  .interview-layout{height:calc(100vh - 150px);min-height:620px;}
  .question-pane{overflow-y:auto;min-height:0;height:100%;scrollbar-gutter:stable;padding-right:38px;}
  .editor-pane{position:sticky!important;top:0!important;height:100%;min-height:0!important;overflow:hidden;}
  .editor-card{height:100%;display:flex;flex-direction:column;}
  .editor-card textarea{flex:1;min-height:0!important;}
  .compiler-result{max-height:30vh;overflow:auto;}
}
@media (max-width:900px){
  .interview-layout{height:auto;min-height:0;}
  .question-pane{height:auto;overflow:visible;}
  .editor-pane{position:relative!important;top:auto!important;height:auto;min-height:0!important;}
}


/* V36: top problem navigation */
.problem-navigation-top {
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
}
.problem-navigation-top .problem-nav-inner {
  min-height: 58px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #202832;
  border-radius: 14px;
  background: rgba(9, 13, 18, .92);
}
.problem-navigation-top .problem-nav-btn {
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
}
.problem-navigation-top .problem-nav-btn.primary { justify-self: end; }
.problem-navigation-top .problem-nav-btn.secondary { justify-self: start; }
.problem-navigation-top .problem-nav-index {
  justify-self: center;
  white-space: nowrap;
}
.problem-navigation-top .problem-nav-placeholder { min-width: 0; }
.problem-navigation-top .problem-nav-end { justify-self: end; margin: 0; }
@media (max-width: 640px) {
  .problem-navigation-top .problem-nav-inner {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 7px;
  }
  .problem-navigation-top .problem-nav-index {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 10px;
  }
  .problem-navigation-top .problem-nav-btn.secondary,
  .problem-navigation-top .problem-nav-btn.primary {
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }
  .problem-navigation-top .problem-nav-end {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

/* JOBS BOARD */
.jobs-hero{padding:78px 0 55px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 80% 20%,rgba(255,59,48,.12),transparent 35%)}
.jobs-hero h1{font:700 clamp(42px,6vw,72px)/1.05 "Space Grotesk";margin:12px 0 18px;max-width:850px}.jobs-hero h1 span{color:var(--accent)}.jobs-hero p{max-width:720px;color:#b8bdc6;font-size:17px}.jobs-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.jobs-meta span{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:8px 12px;border-radius:999px;color:#aeb3bc;font-size:12px}.jobs-meta span:first-child{color:#fff;border-color:rgba(255,59,48,.35)}
.jobs-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:38px 0 80px;align-items:start}.jobs-filters{position:sticky;top:92px;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:18px}.filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.filter-head h2{font:600 18px "Space Grotesk";margin:0}.text-btn{background:none;border:0;color:#ff7168;cursor:pointer;font:inherit;font-size:12px}.jobs-filters label{display:block;color:#aeb3bc;font-size:12px;margin:15px 0}.jobs-filters input,.jobs-filters select,.jobs-toolbar select{width:100%;margin-top:7px;background:#090a0c;border:1px solid var(--line);border-radius:9px;color:#eef0f3;padding:10px 11px;outline:none;font:inherit;font-size:13px}.jobs-filters input:focus,.jobs-filters select:focus,.jobs-toolbar select:focus{border-color:rgba(255,59,48,.6)}.filter-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:#777e89;font-size:11px;line-height:1.6}
.jobs-toolbar{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.jobs-toolbar h2{margin:4px 0 0;font:600 28px "Space Grotesk"}.jobs-toolbar select{width:160px;margin:0}.job-list{display:grid;gap:14px}.job-card{border:1px solid var(--line);background:linear-gradient(145deg,#111317,#0d0e11);border-radius:14px;padding:20px;transition:transform .18s ease,border-color .18s ease,background .18s ease}.job-card:hover{transform:translateY(-2px);border-color:#3b3e46;background:#13151a}.job-card-top{display:flex;justify-content:space-between;gap:15px;align-items:center}.job-company{font-weight:700;font-family:"Space Grotesk"}.job-fresh{display:inline-block;margin-left:9px;padding:3px 7px;border-radius:999px;background:rgba(255,59,48,.1);color:#ff7a72;font-size:10px}.job-date{color:#737a85;font-size:11px}.job-card h3{font:600 21px/1.3 "Space Grotesk";margin:13px 0 10px}.job-card h3 a:hover{color:#ff7168}.job-facts{display:flex;flex-wrap:wrap;gap:8px 18px;color:#9ea4ae;font-size:12px}.job-card p{color:#b5bac3;font-size:13px;line-height:1.7;margin:15px 0}.skill-row{display:flex;gap:7px;flex-wrap:wrap}.skill-row span{padding:5px 8px;border:1px solid rgba(255,255,255,.09);border-radius:6px;color:#aeb4bd;background:rgba(255,255,255,.025);font-size:11px}.skill-row.large span{padding:7px 10px;font-size:12px}.job-card-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:18px;padding-top:15px;display:flex;justify-content:space-between;align-items:center;color:#747b86;font-size:11px}.btn.small{padding:8px 12px;font-size:11px}.empty-jobs{padding:40px;border:1px dashed var(--line);border-radius:14px;color:#858c96;text-align:center}.ad-slot{min-height:92px;border:1px dashed #25282f;border-radius:12px;display:grid;place-items:center;margin:0 0 18px;background:rgba(255,255,255,.012)}.ad-slot span{font-size:9px;letter-spacing:.18em;color:#4f555f}.ad-slot-inline{margin:28px 0}.jobs-archive{margin-top:18px;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;justify-content:space-between;gap:20px;background:#0f1013}.jobs-archive h2{font:600 22px "Space Grotesk";margin:5px 0}.jobs-archive p{color:#9097a1;font-size:13px;max-width:620px}.archive-stats{min-width:120px;display:grid;place-items:center;text-align:center;border-left:1px solid var(--line);padding-left:20px}.archive-stats b{font:700 30px "Space Grotesk"}.archive-stats span{color:#757c87;font-size:10px}
.job-detail-hero{padding:58px 0 42px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 30%,rgba(255,59,48,.1),transparent 35%)}.back-link{display:inline-block;color:#9da3ad;font-size:12px;margin-bottom:28px}.back-link:hover{color:#fff}.job-detail-hero h1{font:700 clamp(34px,5vw,58px)/1.08 "Space Grotesk";max-width:900px;margin:10px 0}.job-company-large{font:600 18px "Space Grotesk";color:#d9dce1}.hero-facts{margin-top:18px}.job-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding:35px 0 80px}.job-detail-card{border:1px solid var(--line);background:#101216;border-radius:14px;padding:26px}.job-action-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}.job-action-row>span{font-size:11px;color:#777e89}.detail-section{padding:28px 0;border-bottom:1px solid var(--line)}.detail-section:last-child{border-bottom:0}.detail-section h2{font:600 25px "Space Grotesk";margin:6px 0 12px}.detail-section p{color:#b6bbc4;line-height:1.75;font-size:14px}.why-box{margin-top:18px;border-left:2px solid var(--accent);background:rgba(255,59,48,.04);padding:15px 17px}.why-box b{font-size:13px}.why-box p{margin:5px 0 0;font-size:13px}.source-line{font-size:11px!important;color:#737a85!important}.job-sidebar{position:sticky;top:92px}.career-links{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);margin-top:18px}.career-links h3{font:600 18px "Space Grotesk"}.career-links a{display:block;padding:10px 0;border-top:1px solid var(--line);color:#b8bdc6;font-size:13px}.career-links a:hover{color:#fff}
@media(max-width:900px){.jobs-layout,.job-detail-layout{grid-template-columns:1fr}.jobs-filters,.job-sidebar{position:static}.jobs-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.filter-head,.filter-note{grid-column:1/-1}.jobs-filters label{margin:8px 0}.jobs-toolbar{align-items:start}.jobs-archive{flex-direction:column}.archive-stats{border-left:0;border-top:1px solid var(--line);padding:15px 0 0}.job-sidebar .ad-slot{display:none}}
@media(max-width:560px){.jobs-hero{padding:52px 0 38px}.jobs-layout{padding-top:24px}.jobs-filters{grid-template-columns:1fr}.jobs-toolbar{display:block}.jobs-toolbar select{margin-top:12px;width:100%}.job-card{padding:16px}.job-card-top{align-items:start}.job-fresh{display:block;width:max-content;margin:6px 0 0}.job-card-bottom{align-items:flex-start;gap:10px}.job-detail-card{padding:18px}.job-detail-hero{padding:38px 0 30px}}

/* V38 IT Jobs hub */
.jobs-hero-wide{padding-bottom:42px}
.jobs-search-large{margin-top:28px;display:flex;align-items:center;gap:12px;max-width:780px;background:#111;border:1px solid #2b2b2b;border-radius:16px;padding:0 18px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.jobs-search-large span{font-size:24px;color:#888}.jobs-search-large input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:18px 0;font:inherit}
.jobs-category-section{padding-top:48px}.section-heading h2{margin:.25rem 0 .4rem}.section-heading p{color:#9b9b9b;max-width:680px}
.career-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.career-category-card{appearance:none;text-align:left;border:1px solid #262626;background:linear-gradient(180deg,#111,#0d0d0d);border-radius:18px;padding:20px;min-height:165px;color:#fff;display:grid;grid-template-columns:42px 1fr 18px;gap:14px;align-items:start;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.career-category-card:hover{transform:translateY(-3px);border-color:#444;background:#141414}.career-category-card b{display:block;font-size:16px}.career-category-card small{display:block;color:#969696;line-height:1.45;margin-top:8px}.career-category-card em{display:block;color:#d0d0d0;font-style:normal;font-size:12px;margin-top:14px}.career-category-card strong{color:#e44;font-size:18px}.category-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#1b1b1b;border:1px solid #303030;font-size:19px;color:#ddd}
.jobs-quick-links{display:flex;gap:10px;flex-wrap:wrap;padding-top:20px;padding-bottom:8px}.jobs-quick-links a{border:1px solid #292929;background:#111;border-radius:999px;padding:10px 15px;color:#ddd;text-decoration:none;font-size:13px}.jobs-quick-links a:hover{border-color:#555;color:#fff}
.job-card-tags{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.job-card-tags span{font-size:11px;color:#cfcfcf;border:1px solid #303030;background:#171717;border-radius:999px;padding:5px 8px}
.jobs-results .jobs-toolbar p{margin:.4rem 0 0;color:#8d8d8d;font-size:13px}
@media(max-width:1100px){.career-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.career-category-grid{grid-template-columns:1fr}.career-category-card{min-height:140px}.jobs-search-large{border-radius:13px}.jobs-category-section{padding-top:32px}.jobs-quick-links{overflow-x:auto;flex-wrap:nowrap;padding-bottom:14px}.jobs-quick-links a{white-space:nowrap}}
/* =========================================================
   TOPIC NAVIGATION
   ========================================================= */

.topic-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;

    margin-top: 60px;
    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,.12);
}


/* ---------------------------------------------------------
   NAV BUTTON
   --------------------------------------------------------- */

.topic-nav-btn {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 78px;
    padding: 16px 20px;

    color: inherit;
    text-decoration: none;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;

    background: rgba(255,255,255,.025);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.topic-nav-btn:hover {
    border-color: rgba(255,60,60,.6);
    background: rgba(255,60,60,.06);

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   NEXT
   --------------------------------------------------------- */

.topic-nav-btn.next-topic {
    justify-content: flex-end;
    text-align: right;
}


/* ---------------------------------------------------------
   ARROW
   --------------------------------------------------------- */

.topic-nav-arrow {
    flex: 0 0 auto;

    font-size: 24px;
    line-height: 1;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.topic-nav-text {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}


.topic-nav-text small {
    font-size: 9px;
    line-height: 1;

    letter-spacing: .12em;

    color: #888;
}


.topic-nav-text strong {
    display: block;

    color: #fff;

    font-size: 14px;
    line-height: 1.4;

    word-break: break-word;
}


/* ---------------------------------------------------------
   CENTER PROGRESS
   --------------------------------------------------------- */

.topic-progress {
    color: #888;

    font-size: 12px;

    white-space: nowrap;

    text-align: center;
}


/* ---------------------------------------------------------
   DISABLED STATE
   --------------------------------------------------------- */

.topic-nav-btn.disabled {
    opacity: .35;

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .topic-navigation {
        grid-template-columns: 1fr 1fr;

        gap: 12px;

        margin-top: 40px;
        padding-top: 24px;
    }


    .topic-progress {
        grid-column: 1 / -1;
        grid-row: 1;

        text-align: center;

        margin-bottom: 4px;
    }


    .topic-nav-btn {
        min-height: 70px;

        padding: 12px;
    }


    .topic-nav-text strong {
        font-size: 12px;
    }


    .topic-nav-text small {
        font-size: 8px;
    }


    .topic-nav-arrow {
        font-size: 20px;
    }
	/* Remove default WordPress site title and description */
body > header,
body > .site-header:not(main .site-header) {
    display: none !important;
}

}


/* =========================================================
   DataEngineerX MOBILE FIX v1.1
   Requires the viewport meta tag in header.php.
   ========================================================= */
@media (max-width: 800px) {
    .site-header {
        position: sticky;
        top: 0;
    }

    .nav-wrap {
        position: relative;
        min-width: 0;
    }

    .menu-btn {
        display: block;
        flex: 0 0 auto;
        padding: 6px 2px;
        cursor: pointer;
        line-height: 1;
    }

    .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 1px);
        z-index: 100;
        flex-direction: column;
        gap: 0;
        padding: 8px;
        background: #101216;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 14px 30px rgba(0,0,0,.35);
    }

    .nav.open {
        display: flex;
    }

    .nav a {
        display: block;
        width: 100%;
        padding: 11px 12px;
        border-radius: 7px;
    }

    .nav a:hover,
    .nav a.active {
        background: rgba(255,59,48,.08);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .topic-grid,
    .project-grid,
    .note-grid,
    .lesson-grid {
        grid-template-columns: 1fr;
    }

    .section-head {
        display: block;
    }

    .section-head > p {
        margin-top: 12px;
    }

    .jobs-box {
        display: block;
    }

    .jobs-box .btn {
        margin-top: 18px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 22px);
    }

    .hero {
        padding: 58px 0 60px;
    }

    h1 {
        font-size: clamp(38px, 11vw, 52px);
        letter-spacing: -1.8px;
    }

    .hero-card pre {
        padding: 18px;
        font-size: 12px;
        line-height: 1.8;
        overflow-x: auto;
    }

    .topic-card,
    .project-card,
    .note {
        padding: 20px;
    }

    .jobs-box {
        padding: 25px;
    }
}

/* =========================================================
   PYTHON LEARNING PAGE
   ========================================================= */

.python-page-hero{padding-bottom:50px}
.python-stats{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.python-stats div{min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 18px}
.python-stats strong,.python-stats span{display:block}
.python-stats strong{font:700 24px "Space Grotesk";color:#fff}
.python-stats span{font-size:12px;color:var(--muted)}

.python-lesson{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:45px}
.python-lesson-copy h3{margin-top:28px}
.python-lesson-copy h3:first-child{margin-top:0}
.python-lesson-copy p,.python-list{font-size:16px}
.python-list{color:var(--muted);padding-left:22px}
.python-list li{margin:8px 0}
.python-code{margin:25px 0;background:#050608;border:1px solid var(--line);border-radius:10px;overflow:auto}
.python-code pre{margin:0;padding:20px;color:#e6e7e9;font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}
.python-day-card{height:max-content;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;position:sticky;top:100px}
.python-day-card h3{font-size:22px}
.python-checklist{display:grid;gap:9px;margin-top:20px}
.python-checklist span{font-size:13px;color:#c8cbd1;padding:9px 0;border-top:1px solid var(--line)}
.python-next-box{margin-top:0}

.python-roadmap{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.python-roadmap-card{display:grid;grid-template-columns:50px 1fr;gap:15px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;min-height:92px}
.python-roadmap-card.available{border-color:#5a2926}
.python-day-number{font:700 14px "Space Grotesk";color:var(--accent)}
.python-roadmap-card h3{font-size:17px;margin:0 0 6px}
.python-status{font-size:12px;color:#777d86}
.python-roadmap-card.available .python-status{color:var(--accent);font-weight:700}

@media(max-width:800px){
  .python-lesson{grid-template-columns:1fr;gap:25px}
  .python-day-card{position:static}
  .python-roadmap{grid-template-columns:1fr}
  .python-stats{display:grid;grid-template-columns:1fr 1fr}
  .python-stats div{min-width:0}
}

/* DataEngineerX v2.0 refresh */
:root{--dex-bg:#f7f9fc;--dex-card:#fff;--dex-ink:#101828;--dex-muted:#667085;--dex-line:#e4e7ec;--dex-accent:#12b76a;--dex-dark:#0b1220;--dex-blue:#155eef}
body{background:var(--dex-bg);color:var(--dex-ink);font-family:Inter,system-ui,sans-serif;line-height:1.65}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--dex-line)}
.nav-wrap{min-height:72px;display:flex;align-items:center;gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--dex-ink);text-decoration:none;white-space:nowrap}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--dex-dark);color:#fff;border-radius:9px;font-weight:800}.accent{color:var(--dex-accent)}.nav{display:flex;align-items:center;gap:22px;margin-left:auto}.nav a{color:#475467;text-decoration:none;font-size:14px;font-weight:600}.nav a:hover{color:var(--dex-ink)}.nav-cta{background:var(--dex-dark);color:#fff!important;padding:10px 15px;border-radius:9px;text-decoration:none;font-size:14px;font-weight:700}.menu-btn{display:none;background:none;border:0;font-size:25px;margin-left:auto}
.hero-home{padding:90px 0 72px;background:linear-gradient(180deg,#fff 0,#f7f9fc 100%)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.hero h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(44px,6vw,74px);line-height:1.02;letter-spacing:-.045em;margin:16px 0 24px}.hero h1 span{color:var(--dex-accent)}.hero-copy>p{font-size:19px;color:#475467;max-width:650px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--dex-accent);text-transform:uppercase}.hero-actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid #d0d5dd;border-radius:9px;text-decoration:none;color:var(--dex-ink);font-weight:700;background:#fff}.btn.primary{background:var(--dex-dark);color:#fff;border-color:var(--dex-dark)}.hero-proof{display:flex;gap:24px;flex-wrap:wrap;color:var(--dex-muted);font-size:13px}.hero-proof b{color:var(--dex-ink);margin-right:4px}.code-card{background:#111827;border-radius:18px;box-shadow:0 24px 60px rgba(16,24,40,.18);overflow:hidden;transform:rotate(1deg)}.terminal-top{display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid #263244}.terminal-top i{width:9px;height:9px;border-radius:50%;background:#667085}.code-card pre,.mini-terminal pre{margin:0;padding:25px;color:#d0d5dd;font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.muted{color:#667085}.code-card .accent{color:#32d583}.trust-strip{padding:0 0 28px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dex-line);background:#fff;border-radius:16px;overflow:hidden}.stat-grid div{padding:24px;border-right:1px solid var(--dex-line)}.stat-grid div:last-child{border-right:0}.stat-grid strong{display:block;font-size:25px}.stat-grid span{font-size:13px;color:var(--dex-muted)}
.section{padding:85px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}.section-head h2,.about-grid h2,.contact-card h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:38px;line-height:1.1;margin:7px 0 0;letter-spacing:-.03em}.section-head>p{max-width:500px;color:var(--dex-muted);margin:0}.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.topic-card{padding:25px;background:#fff;border:1px solid var(--dex-line);border-radius:15px;text-decoration:none;color:inherit;transition:.2s}.topic-card:hover,.project-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,24,40,.08)}.topic-icon{display:inline-grid;place-items:center;min-width:42px;height:34px;padding:0 9px;border-radius:8px;background:#ecfdf3;color:#067647;font-weight:800;font-size:12px}.topic-card h3{font-size:20px;margin:20px 0 8px}.topic-card p,.project-card p{color:var(--dex-muted);font-size:14px}.arrow,.project-card b{display:block;margin-top:18px;color:var(--dex-blue);font-size:13px}.dark-section{background:var(--dex-dark);color:#fff}.dark-section .eyebrow{color:#32d583}.dark-section p{color:#98a2b3}.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.split-feature h2{font:600 44px/1.08 "Space Grotesk",Inter,sans-serif;letter-spacing:-.03em}.mini-terminal{border:1px solid #344054;border-radius:15px;overflow:hidden;background:#101828}.panel-head{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #344054;font-size:13px;color:#98a2b3}.result-line{padding:14px 16px;color:#32d583;border-top:1px solid #344054;font-size:13px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{padding:26px;background:#fff;border:1px solid var(--dex-line);border-radius:15px;text-decoration:none;color:inherit}.project-card span{font-size:11px;font-weight:800;color:var(--dex-accent);letter-spacing:.1em}.project-card h3{font-size:21px;margin:12px 0 7px}.jobs-box,.contact-card{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:32px;background:#fff;border:1px solid var(--dex-line);border-radius:16px}.jobs-box h2,.contact-card h2{font-size:28px}.jobs-box p,.contact-card p,.about-grid p{color:var(--dex-muted)}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.contact-section{padding-top:0}.contact-card{background:#ecfdf3;border-color:#abefc6}.site-footer{background:#080d17;color:#98a2b3;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-brand{color:#fff}.site-footer p{max-width:360px}.site-footer h3{font-size:13px;color:#fff}.site-footer a:not(.brand){display:block;color:#98a2b3;text-decoration:none;margin:8px 0;font-size:14px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #1d2939;margin-top:40px;padding-top:20px;font-size:12px}
@media(max-width:900px){.nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--dex-line);padding:20px;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.menu-btn{display:block}.nav-cta{display:none}.hero-grid,.split-feature,.about-grid{grid-template-columns:1fr}.hero-grid{gap:40px}.topic-grid{grid-template-columns:repeat(2,1fr)}.project-grid{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.stat-grid div:nth-child(2){border-right:0}.stat-grid div:nth-child(-n+2){border-bottom:1px solid var(--dex-line)}}
@media(max-width:600px){.container{width:min(100% - 28px,1180px)}.hero-home{padding:55px 0}.hero h1{font-size:44px}.section{padding:60px 0}.section-head{display:block}.section-head>p{margin-top:14px}.topic-grid,.project-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}.stat-grid div{border-right:0;border-bottom:1px solid var(--dex-line)}.stat-grid div:last-child{border-bottom:0}.jobs-box,.contact-card{display:block}.jobs-box .btn,.contact-card .btn{margin-top:18px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}}

/* =========================================================
   HOME SCREEN — reference UI implementation
   ========================================================= */
:root{--dex-bg:#090a0f;--dex-panel:#111219;--dex-panel2:#15161e;--dex-text:#f5f2ef;--dex-muted:#9a9ba8;--dex-line:#292b35;--dex-orange:#ff5a1f;--dex-yellow:#ffd13f;--dex-teal:#19c7a5;--dex-purple:#7f68ff}
.dex-home{background:var(--dex-bg);color:var(--dex-text);font-family:"Space Grotesk",Inter,Arial,sans-serif;overflow:hidden}.dex-home *{box-sizing:border-box}.dex-container{width:min(1240px,calc(100% - 48px));margin:0 auto}.dex-grid-bg{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px}.dex-header{background:rgba(9,10,15,.82)!important;border-bottom:1px solid rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)}.dex-nav-wrap{height:76px;display:flex;align-items:center;gap:28px}.dex-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;white-space:nowrap}.dex-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#ff5a1f,#ffcf3b);color:#fff;font:600 11px "DM Mono",monospace;box-shadow:0 12px 30px rgba(255,90,31,.22)}.dex-brand-x{color:#ffb52e}.dex-nav{display:flex;gap:7px;align-items:center;margin:auto}.dex-nav a{color:#8f909b;font-size:14px;font-weight:600;padding:9px 12px;border-radius:999px}.dex-nav a:hover,.dex-nav a.active{color:#f4f2ef;background:rgba(255,90,31,.12)}.dex-search{width:170px;height:38px;border:1px solid #2c2d36;border-radius:12px;display:flex;align-items:center;padding:0 9px;gap:7px;color:#777b88}.dex-search input{width:100%;background:none;border:0;outline:0;color:#fff;font:13px "Space Grotesk"}.dex-search kbd{font:10px "DM Mono";border:1px solid #3a3b45;border-radius:6px;padding:3px 5px;white-space:nowrap}.dex-nav-cta{background:#f4f2ef;color:#101116;border-radius:999px;padding:11px 18px;font-size:13px;font-weight:700;white-space:nowrap}.dex-home h1,.dex-home h2,.dex-home h3{font-family:"Space Grotesk",sans-serif}.dex-home p{color:var(--dex-muted)}.dex-label,.dex-kicker{font:600 11px "DM Mono",monospace;letter-spacing:.18em;color:#ff5a1f;text-transform:uppercase}.dex-hero{min-height:830px;display:flex;align-items:center;padding:72px 0 58px;position:relative}.dex-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.dex-kicker{display:inline-flex;gap:9px;border:1px solid rgba(255,90,31,.45);border-radius:999px;padding:8px 15px;color:#ff7140;background:rgba(255,90,31,.07);text-transform:none;letter-spacing:.02em;font-family:"Space Grotesk";font-size:13px}.dex-hero-copy h1{font-size:clamp(68px,7vw,92px);line-height:.98;letter-spacing:-.055em;margin:42px 0 28px;color:#f5f2ef}.dex-hero-copy h1 span,.dex-section h2 span{background:linear-gradient(90deg,#ff5a1f,#ffd13f);-webkit-background-clip:text;background-clip:text;color:transparent}.dex-hero-copy>p{font-size:18px;line-height:1.75;max-width:650px;margin-bottom:34px}.dex-actions{display:flex;gap:16px;align-items:center}.dex-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:999px;padding:15px 24px;font-size:14px;font-weight:700;border:1px solid #373943}.dex-btn-primary{background:linear-gradient(100deg,#ff5a1f,#ffd13f);color:#fff;border:0;box-shadow:0 14px 35px rgba(255,90,31,.22)}.dex-btn-primary b{font-size:16px}.dex-btn-ghost{color:#e8e6e5;background:#101117}.dex-btn-ghost b{font-size:10px}.dex-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #282a33;border-radius:16px;margin-top:64px;overflow:hidden;background:rgba(17,18,25,.72);max-width:600px}.dex-hero-stats div{padding:20px 20px;border-right:1px solid #282a33}.dex-hero-stats div:last-child{border-right:0}.dex-hero-stats strong{display:block;font-size:25px}.dex-hero-stats strong span{color:#ff5a1f}.dex-hero-stats small{display:block;color:#737582;font:600 10px/1.45 "DM Mono";letter-spacing:.08em;margin-top:5px}.dex-hero-visual{min-height:620px;position:relative;display:grid;place-items:center}.dex-orbit{position:absolute;width:520px;height:520px;border:1px dashed #292b34;border-radius:50%;opacity:.85}.dex-orbit-two{width:400px;height:400px;opacity:.55}.dex-shape{position:absolute;filter:blur(.1px);transform:rotate(-5deg)}.dex-shape-teal{right:5%;top:31%;width:150px;height:235px;background:linear-gradient(145deg,#24c8a6,#078e7a);border-radius:15px 15px 35px 35px;transform:skewY(-5deg) rotate(-4deg);opacity:.9}.dex-shape-orange{right:12%;bottom:7%;width:155px;height:90px;background:linear-gradient(145deg,#ff6328,#d64b13);clip-path:polygon(58% 0,100% 100%,0 76%);transform:rotate(-8deg)}.dex-code-window{position:relative;z-index:3;width:480px;height:440px;border:1px solid #32343d;background:#0f1016;border-radius:15px;box-shadow:0 35px 80px rgba(0,0,0,.55);transform:rotate(-4deg);overflow:hidden}.dex-window-bar{height:52px;border-bottom:1px solid #292b34;display:flex;align-items:center;padding:0 17px;gap:7px}.w-dot{width:10px;height:10px;border-radius:50%;display:block}.w-dot.red{background:#ff5b57}.w-dot.yellow{background:#ffc857}.w-dot.green{background:#20c45a}.dex-file{margin-left:13px;color:#858896;font:12px "DM Mono"}.dex-sql-tag{margin-left:auto;color:#ff5a1f;font:10px "DM Mono";border:1px solid rgba(255,90,31,.25);padding:4px 7px;border-radius:5px}.dex-code-window pre{padding:24px 23px;margin:0;font:13px/2.1 "DM Mono",monospace;color:#c5c7cf}.dex-code-window .ln{color:#4b4d58}.dex-code-window .kw{color:#ff672b}.dex-code-window .fn{color:#f0b04c}.dex-result{border-top:1px solid #282a33;padding:14px 18px;color:#676a76;font:9px "DM Mono";letter-spacing:.08em}.dex-result>b{float:right;color:#ddd}.result-row{display:flex;justify-content:space-between;border-top:1px solid #1e2027;padding:8px 0;color:#777b87;letter-spacing:0;font-size:10px}.dex-float-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;padding:10px 13px;background:#15161d;border:1px solid #343640;border-radius:14px;box-shadow:0 15px 35px rgba(0,0,0,.4)}.dex-float-chip b{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;color:#fff;font:700 10px "DM Mono"}.dex-float-chip span{font-size:12px;font-weight:700;color:#e5e3e2;line-height:1.3}.chip-sql{right:2%;top:16%}.chip-sql b{background:#ff5a1f}.chip-de{right:-5%;bottom:27%}.chip-de b{background:#19c7a5}.chip-py{left:17%;bottom:8%}.chip-py b{background:#ffd13f;color:#3b2b00}.dex-section{padding:110px 0}.dex-section-top{display:grid;grid-template-columns:1.1fr .7fr;gap:80px;align-items:start;margin-bottom:65px}.dex-section-top h2,.dex-centered-head h2{font-size:clamp(48px,5.4vw,70px);line-height:1.02;letter-spacing:-.045em;margin:0}.dex-section-top>p{font-size:17px;line-height:1.8;margin:35px 0 0}.dex-process{border-top:1px solid #24262f}.dex-process-track{display:grid;grid-template-columns:repeat(6,1fr);position:relative;margin-bottom:68px}.dex-process-track:before{content:"";position:absolute;top:31px;left:7%;right:7%;height:1px;background:#3a3b44}.dex-process-step{position:relative;background:none;border:0;color:#fff;text-align:center;padding:0 10px;cursor:pointer}.dex-process-step>span{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border:1px solid #373944;border-radius:50%;margin:0 auto 22px;background:#0d0e13;color:#858792;font:11px "DM Mono"}.dex-process-step.active>span{background:linear-gradient(135deg,#ff5a1f,#ffd13f);border-color:transparent;color:#fff;box-shadow:0 0 0 12px rgba(255,90,31,.08),0 10px 30px rgba(255,90,31,.22)}.dex-process-step strong{display:block;font-size:16px;margin-bottom:7px}.dex-process-step small{display:block;color:#777b88;font-size:13px;line-height:1.45}.dex-process-card{border:1px solid #32343e;border-radius:17px;background:#12131a;display:grid;grid-template-columns:120px 1fr 180px;gap:35px;align-items:center;padding:50px 40px}.stage-number{font-size:54px;color:#292b34;font-weight:600}.dex-process-card h3{font-size:25px;margin:12px 0}.dex-process-card p{font-size:15px;line-height:1.8;max-width:680px;margin:0}.outcome{border-left:1px solid #2d2f37;padding-left:30px}.outcome small{display:block;font:10px "DM Mono";letter-spacing:.15em;color:#727580;margin-bottom:7px}.outcome strong{font-size:14px}.dex-progress{display:flex;gap:6px;margin:18px 16px 0}.dex-progress i{height:3px;background:#292b33;flex:1}.dex-progress i.active{background:linear-gradient(90deg,#ff5a1f,#ffd13f)}.dex-layers{padding-top:105px}.dex-layer-layout{display:grid;grid-template-columns:245px 1fr;gap:65px}.dex-layer-nav{border-left:1px solid #31323a}.dex-layer-item{display:block;width:100%;text-align:left;background:none;border:0;border-left:1px solid transparent;padding:0 0 24px 20px;margin:0 0 3px;color:#fff;cursor:pointer}.dex-layer-item span{display:block;color:#696c78;font:10px "DM Mono";margin-bottom:7px}.dex-layer-item strong{display:block;font-size:16px;color:#aeb0bb}.dex-layer-item small{display:block;color:#666a77;font-size:12px;margin-top:4px}.dex-layer-item.active{border-left:2px solid #ff5a1f}.dex-layer-item.active strong{color:#fff}.dex-layer-item.active span{color:#ff5a1f}.dex-layer-card{border:1px solid #32343e;border-radius:18px;background:#12131a;min-height:505px}.dex-card-head{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #292b34;color:#686b78;font:10px "DM Mono";letter-spacing:.13em}.dex-card-head b{color:#19c7a5}.dex-layer-body{padding:54px 46px}.dex-layer-body h3{font-size:39px;letter-spacing:-.035em;margin:18px 0}.dex-layer-body>p{font-size:16px;line-height:1.75;max-width:750px}.dex-mini-steps{display:flex;margin:45px 40px;border-top:1px solid #343640}.dex-mini-steps span{position:relative;flex:1;text-align:center;padding-top:14px;font:11px "DM Mono"}.dex-mini-steps span:before{content:"";position:absolute;top:-13px;left:50%;width:25px;height:25px;border:1px solid #3b3d47;background:#11121a;border-radius:50%;transform:translateX(-50%)}.dex-mini-steps span.active:before{background:linear-gradient(135deg,#ff5a1f,#ffd13f);border:0;box-shadow:0 0 25px rgba(255,90,31,.3)}.dex-mini-steps small{display:block;font:600 12px/1.35 "Space Grotesk";color:#ddd;margin-top:15px}.dex-layer-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;border-top:1px solid #292b34;padding-top:26px}.dex-layer-meta small{display:block;color:#777a86;font:9px "DM Mono";letter-spacing:.15em;margin-bottom:7px}.dex-layer-meta b{font-size:13px}.dex-paths{padding-top:95px}.dex-path-list{display:grid;gap:15px}.dex-path-card{position:relative;display:grid;grid-template-columns:70px 1.05fr 1.3fr 115px;gap:25px;align-items:center;padding:30px 33px;border:1px solid #2e3039;border-radius:18px;background:#111219;overflow:hidden}.dex-path-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#ff5a1f;opacity:0}.dex-path-card.active:before,.dex-path-card.yellow:before,.dex-path-card.teal:before{opacity:1}.dex-path-card.yellow:before{background:#ffd13f}.dex-path-card.teal:before{background:#19c7a5}.path-no{align-self:start;color:#737682;font:10px "DM Mono"}.path-copy .dex-label{margin-bottom:10px}.path-copy h3{font-size:25px;margin-bottom:9px}.path-copy p{font-size:13px;line-height:1.7;margin:0}.path-line{display:flex;align-items:center;justify-content:space-between;position:relative;padding-top:14px}.path-line:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#393b44}.path-line b{font-size:10px;position:relative;color:#e7e5e3}.path-line b:before{content:"";display:block;width:9px;height:9px;border-radius:50%;border:1px solid #4b4d57;background:#111219;margin:-19px auto 8px}.path-card.yellow .path-line b:first-child:before{border-color:#ffd13f}.path-count{text-align:right}.path-count strong{display:block;font-size:31px}.path-count small{display:block;color:#777a85;font:9px "DM Mono";letter-spacing:.13em}.path-count span{display:block;font-size:12px;font-weight:700;margin-top:12px}.dex-lifecycle{padding-bottom:65px}.dex-centered-head{text-align:center;max-width:700px;margin:0 auto 35px}.dex-centered-head h2{margin:15px 0 18px}.dex-centered-head p{font-size:16px;line-height:1.7}.dex-loop-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;max-width:1100px;margin:0 auto}.dex-loop{position:relative;width:470px;height:470px;margin:auto}.loop-ring{position:absolute;inset:45px;border:1px dashed #373943;border-radius:50%}.loop-ring:before,.loop-ring:after{content:"";position:absolute;width:7px;height:7px;background:#ff5a1f;border-radius:50%;left:8px;top:50%}.loop-ring:after{left:auto;right:12px;background:#19c7a5}.loop-center{position:absolute;inset:145px;border:1px solid #393b46;border-radius:50%;display:grid;place-content:center;text-align:center;background:#111219}.loop-center strong{font-size:43px}.loop-center small{font:10px "DM Mono";letter-spacing:.16em;color:#777a85;margin-top:3px}.loop-node{position:absolute;width:76px;height:76px;border-radius:50%;border:1px solid #353742;background:#101117;color:#fff;font:12px "DM Mono";cursor:pointer;z-index:2}.loop-node small{display:block;font-size:10px}.loop-node.active{background:linear-gradient(135deg,#ff5a1f,#ffd13f);border:0;box-shadow:0 15px 40px rgba(255,90,31,.28)}.loop-node:not(.right):not(.bottom):not(.left){top:5px;left:50%;transform:translateX(-50%)}.loop-node.right{right:5px;top:50%;transform:translateY(-50%)}.loop-node.bottom{bottom:5px;left:50%;transform:translateX(-50%)}.loop-node.left{left:5px;top:50%;transform:translateY(-50%)}.dex-loop-copy h3{font-size:29px;margin:22px 0 14px}.dex-loop-copy p{font-size:16px;line-height:1.8}.dex-loop-copy>b{font-size:13px}.dex-loop-copy>b span{color:#fff}.loop-bars{display:flex;gap:8px;margin-top:50px}.loop-bars i{width:28px;height:4px;background:#292b34}.loop-bars i.active{background:linear-gradient(90deg,#ff5a1f,#ffd13f)}.dex-tech-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:45px}.dex-tech-tags a{display:block;color:inherit;text-decoration:none}.dex-tech-tags span{display:block;border:1px solid #2f313a;background:#111219;padding:8px 15px;border-radius:999px;font-size:12px;font-weight:600;transition:transform .25s ease,border-color .25s ease,background .25s ease}.dex-tech-tags a:hover span,.dex-tech-tags a:focus-visible span{transform:translateY(-3px);border-color:#4a4c56;background:#15161d}.dex-tech-tags a:focus-visible{outline:2px solid #ff8a5e;outline-offset:4px;border-radius:999px}.dex-problems{padding-top:105px}.dex-problem-toolbar{display:grid;grid-template-columns:1fr auto 250px;gap:14px;margin-bottom:20px}.dex-problem-toolbar .tabs{display:flex;border:1px solid #2d2f38;border-radius:13px;padding:5px;background:#111219}.dex-problem-toolbar button{background:none;border:0;color:#8c8e99;padding:10px 14px;border-radius:9px;font:600 11px "DM Mono";letter-spacing:.06em}.dex-problem-toolbar button.active{background:rgba(255,90,31,.14);color:#ff8a5e}.dex-problem-toolbar input{background:#111219;border:1px solid #2d2f38;color:#fff;border-radius:13px;padding:0 14px;outline:0}.dex-problem-list{border:1px solid #30323b;border-radius:18px;overflow:hidden}.dex-problem-list>a{display:grid;grid-template-columns:35px 1fr 140px 130px 25px;gap:15px;align-items:center;padding:23px 24px;border-bottom:1px solid #292b34}.dex-problem-list>a:last-child{border-bottom:0}.problem-dot{font-size:24px;color:#5d606c}.dex-problem-list strong{display:block;font-size:15px}.dex-problem-list small{display:block;color:#777a86;font-size:11px;margin-top:4px}.dex-problem-list em{display:inline-block;border:1px solid #3a3c46;border-radius:5px;padding:3px 6px;font:8px "DM Mono";color:#858894;margin:7px 4px 0 0;font-style:normal}.dex-problem-list>b{font-size:12px}.dex-problem-list>b small{font-size:10px}.dex-workspace{padding-top:100px}.dex-workspace-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.dex-workspace-tabs button{min-height:185px;text-align:left;padding:29px 26px;border:1px solid #2f313b;border-radius:18px;background:#111219;color:#fff;cursor:pointer}.dex-workspace-tabs button.active{border-color:#ff5a1f;box-shadow:0 20px 55px rgba(255,90,31,.08)}.dex-workspace-tabs span{display:block;color:#6f7280;font:10px "DM Mono";margin-bottom:34px}.dex-workspace-tabs strong{display:block;font-size:20px;margin-bottom:10px}.dex-workspace-tabs small{display:block;color:#8e909c;line-height:1.6}.dex-editor-card{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid #30323c;border-radius:18px;background:#111219;overflow:hidden}.dex-editor-card>div{padding:38px 40px}.dex-editor-card>div+div{border-left:1px solid #2b2d36}.dex-editor-card h3{font-size:29px;margin:20px 0 12px}.dex-editor-card p{line-height:1.8;font-size:14px}.editor-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.editor-tags span{border:1px solid #363843;padding:6px 11px;border-radius:999px;font:10px "DM Mono"}.editor-workflow>small,.system-flow-label{font:9px "DM Mono";letter-spacing:.15em;color:#727580}.editor-workflow>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0 18px}.editor-workflow span{border:1px solid #2f313a;border-radius:11px;padding:12px 10px;font:10px "DM Mono";color:#777a86}.editor-workflow b{display:block;color:#fff;margin-bottom:5px}.dex-workspace-footer,.dex-project-footer{display:flex;justify-content:space-between;color:#666a77;font-size:11px;margin-top:18px}.dex-workspace-footer b,.dex-project-footer b{font:9px "DM Mono";letter-spacing:.13em}.dex-projects{padding-top:95px}.dex-project-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.dex-project-tabs button{min-height:250px;text-align:left;padding:28px;border:1px solid #2e3039;border-radius:17px;background:#111219;color:#fff;cursor:pointer}.dex-project-tabs button.active{border-color:#ff5a1f}.dex-project-tabs span{display:block;font:10px "DM Mono";color:#777a86;margin-bottom:38px}.dex-project-tabs b,.dex-project-tabs em{display:block;font:10px "DM Mono";letter-spacing:.1em;color:#ff5a1f;font-style:normal;margin-bottom:8px}.dex-project-tabs strong{display:block;font-size:20px;margin-bottom:9px}.dex-project-tabs small{display:block;color:#8c8f9a;line-height:1.6}.dex-project-tabs em{color:#fff;font-size:9px;margin-top:30px;letter-spacing:.03em}.dex-project-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;border:1px solid #30323c;border-radius:18px;background:#111219;margin-top:15px;padding:37px}.dex-project-detail h3{font-size:28px;margin:20px 0 10px}.dex-project-detail p{line-height:1.75;font-size:14px}.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}.project-meta span{border:1px solid #2d2f38;border-radius:12px;padding:15px}.project-meta small{display:block;font:9px "DM Mono";letter-spacing:.12em;color:#70737e;margin-bottom:7px}.project-meta b{font-size:12px}.system-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:24px}.system-flow span{border:1px solid #373943;border-radius:10px;padding:10px 12px;font:10px "DM Mono"}.project-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;border-top:1px solid #2d2f38;margin-top:20px;padding-top:17px}.project-steps span{font:10px "DM Mono"}.project-steps small{color:#727580}.dex-final-cta{padding:70px 0 110px}.dex-final-card{min-height:505px;border:1px solid #33353e;border-radius:22px;background:radial-gradient(circle at 50% 50%,rgba(255,90,31,.12),transparent 43%),#111219;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.dex-final-card h2{font-size:64px;line-height:1.02;letter-spacing:-.045em;margin:20px 0}.dex-final-card h2 span{background:linear-gradient(90deg,#ff5a1f,#ffd13f);-webkit-background-clip:text;background-clip:text;color:transparent}.dex-final-card p{font-size:16px;line-height:1.7}.dex-final-card .dex-btn{margin-top:24px}.dex-home+.site-footer,.site-footer{background:#090a0f;border-top:1px solid #252731;color:#727580}.site-footer .container{max-width:1240px}.site-footer a{color:#8d909c}.site-footer a:hover{color:#fff}
@media(max-width:1050px){.dex-nav{gap:0}.dex-nav a{padding:8px}.dex-search{width:145px}.dex-nav-cta{display:none}.dex-hero-grid{grid-template-columns:1fr}.dex-hero{padding-top:55px}.dex-hero-visual{min-height:560px}.dex-section-top{grid-template-columns:1fr .75fr;gap:35px}.dex-path-card{grid-template-columns:45px 1fr 1fr 90px}.dex-loop-layout{gap:25px}.dex-editor-card{grid-template-columns:1fr}.dex-editor-card>div+div{border-left:0;border-top:1px solid #2b2d36}.dex-project-detail{grid-template-columns:1fr}.dex-process-card{grid-template-columns:90px 1fr}.outcome{grid-column:2;border-left:0;border-top:1px solid #2d2f37;padding:18px 0 0}}
@media(max-width:820px){.dex-nav{display:none;position:absolute;top:76px;left:16px;right:16px;background:#111219;border:1px solid #2c2e37;border-radius:15px;padding:10px;flex-direction:column;align-items:stretch}.dex-nav.open{display:flex}.dex-nav a{padding:12px}.menu-btn{display:block;margin-left:auto;color:#fff}.dex-search{display:none}.dex-section{padding:82px 0}.dex-section-top{grid-template-columns:1fr}.dex-section-top>p{margin-top:0}.dex-process-track{grid-template-columns:repeat(3,1fr);gap:35px 0}.dex-process-track:before{display:none}.dex-process-card{grid-template-columns:1fr;padding:32px}.outcome{grid-column:auto}.dex-layer-layout{grid-template-columns:1fr;gap:30px}.dex-layer-nav{display:grid;grid-template-columns:repeat(2,1fr);border-left:0;gap:4px}.dex-layer-item{border:1px solid #292b34!important;border-radius:10px;padding:13px}.dex-layer-item.active{border-color:#ff5a1f!important}.dex-path-card{grid-template-columns:45px 1fr}.path-line{grid-column:2}.path-count{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:10px}.path-count small{display:inline}.path-count span{margin:0}.dex-loop-layout{grid-template-columns:1fr}.dex-loop{width:390px;height:390px}.loop-center{inset:120px}.dex-problem-toolbar{grid-template-columns:1fr}.dex-problem-toolbar .difficulty{order:2}.dex-problem-toolbar input{height:48px}.dex-problem-list>a{grid-template-columns:30px 1fr 70px 70px 15px}.dex-workspace-tabs,.dex-project-tabs{grid-template-columns:1fr}.dex-project-tabs button{min-height:190px}.dex-final-card h2{font-size:50px}}
@media(max-width:560px){.dex-container{width:min(100% - 28px,1240px)}.dex-nav-wrap{height:68px}.dex-header{position:sticky}.dex-brand{font-size:16px}.dex-brand-mark{width:34px;height:34px}.dex-hero{min-height:auto;padding:55px 0 45px}.dex-hero-copy h1{font-size:59px;margin:28px 0 20px}.dex-hero-copy>p{font-size:16px}.dex-actions{flex-direction:column;align-items:stretch}.dex-btn{text-align:center}.dex-hero-stats{grid-template-columns:repeat(2,1fr);margin-top:40px}.dex-hero-stats div:nth-child(2){border-right:0}.dex-hero-stats div:nth-child(-n+2){border-bottom:1px solid #282a33}.dex-hero-visual{min-height:390px}.dex-orbit{width:330px;height:330px}.dex-orbit-two{width:260px;height:260px}.dex-code-window{width:320px;height:305px}.dex-code-window pre{padding:15px;font-size:9px}.dex-window-bar{height:40px}.dex-result{padding:8px}.dex-float-chip{transform:scale(.78)}.chip-sql{right:-5%;top:9%}.chip-de{right:-12%;bottom:22%}.chip-py{left:-7%;bottom:1%}.dex-section-top h2,.dex-centered-head h2{font-size:44px}.dex-process-track{grid-template-columns:repeat(2,1fr)}.dex-layer-body{padding:32px 22px}.dex-layer-body h3{font-size:29px}.dex-mini-steps{margin:40px 0;overflow:hidden}.dex-mini-steps span{min-width:75px}.dex-layer-meta{grid-template-columns:1fr}.dex-path-card{padding:23px 20px}.path-copy h3{font-size:21px}.path-line{display:none}.dex-loop{width:315px;height:315px}.loop-ring{inset:30px}.loop-center{inset:96px}.loop-center strong{font-size:34px}.loop-node{width:62px;height:62px}.dex-problem-toolbar .tabs{overflow:auto}.dex-problem-toolbar button{white-space:nowrap}.dex-problem-list>a{grid-template-columns:24px 1fr 20px;padding:20px 14px}.dex-problem-list>a>b{display:none}.dex-editor-card>div{padding:28px 22px}.dex-project-detail{padding:25px 20px}.project-meta{grid-template-columns:1fr}.project-steps{grid-template-columns:repeat(3,1fr)}.dex-final-card{min-height:440px;padding:25px 18px}.dex-final-card h2{font-size:44px}.site-footer .footer-grid{grid-template-columns:1fr 1fr}}


/* Home v2.3 interaction polish: animated hero, tactile tabs, auto-advancing sections */
.dex-home{--dex-orange:#ff5a1f;--dex-yellow:#ffd13f;--dex-teal:#19c7a5}
.dex-grid-bg{position:relative;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px}
.dex-grid-bg:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 15%,rgba(255,90,31,.10),transparent 28%),radial-gradient(circle at 82% 58%,rgba(25,199,165,.07),transparent 25%);opacity:.75}
.dex-home section{position:relative}
.dex-hero-copy,.dex-hero-visual{animation:dexReveal .9s cubic-bezier(.2,.75,.25,1) both}
.dex-hero-visual{animation-delay:.12s}
.dex-code-window{animation:dexCodeFloat 6s ease-in-out infinite}
.dex-orbit{animation:dexOrbit 18s linear infinite}
.dex-orbit-two{animation-duration:24s;animation-direction:reverse}
.dex-shape-teal{animation:dexShapeFloat 7s ease-in-out infinite}
.dex-shape-orange{animation:dexShapeFloat 6s ease-in-out .6s infinite reverse}
.dex-float-chip{animation:dexChipFloat 4.5s ease-in-out infinite}
.chip-de{animation-delay:.8s}.chip-py{animation-delay:1.5s}
.dex-process-step>span,.loop-node{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.dex-process-step:hover>span,.dex-process-step:focus-visible>span{transform:translateY(-4px) scale(1.05)}
.dex-process-step.active>span{animation:dexPulse 2.4s ease-in-out infinite}
.dex-process-card,.dex-layer-body,.dex-editor-card,.dex-project-detail{transition:box-shadow .35s ease,border-color .35s ease,transform .35s ease}
.dex-process-card:hover,.dex-layer-card:hover,.dex-editor-card:hover,.dex-project-detail:hover{border-color:#41434e;box-shadow:0 28px 80px rgba(0,0,0,.24)}
.dex-process-card{animation:dexCardIn .7s ease both}
.dex-layer-body.is-switching,.dex-editor-card .is-switching,.dex-project-detail.is-switching{animation:dexTabSwap .42s cubic-bezier(.2,.75,.25,1) both}
.dex-layer-item,.dex-workspace-tabs button,.dex-project-tabs button{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
.dex-layer-item:after,.dex-workspace-tabs button:after,.dex-project-tabs button:after{content:"";position:absolute;inset:auto -20% 0;height:2px;background:linear-gradient(90deg,var(--dex-orange),var(--dex-yellow));transform:translateX(-105%);transition:transform .45s cubic-bezier(.2,.75,.25,1);z-index:-1}
.dex-layer-item.active:after,.dex-workspace-tabs button.active:after,.dex-project-tabs button.active:after{transform:translateX(0)}
.dex-workspace-tabs button,.dex-project-tabs button{background:linear-gradient(180deg,#14151c,#111219);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.dex-workspace-tabs button:hover,.dex-project-tabs button:hover{transform:translateY(-4px);border-color:#4a3a36;background:#15161d}
.dex-workspace-tabs button.active,.dex-project-tabs button.active{transform:translateY(-5px);border-color:var(--dex-orange);box-shadow:0 22px 55px rgba(255,90,31,.11),inset 0 1px 0 rgba(255,255,255,.035)}
.dex-workspace-tabs button.active:before,.dex-project-tabs button.active:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,rgba(255,90,31,.12),transparent 42%);pointer-events:none}
.dex-workspace-tabs button .tab-progress,.dex-project-tabs button .tab-progress{position:absolute;left:0;bottom:0;width:0;height:3px;border-radius:0 4px 4px 0;background:linear-gradient(90deg,var(--dex-orange),var(--dex-yellow));display:block;opacity:0}
.dex-workspace-tabs button.active .tab-progress,.dex-project-tabs button.active .tab-progress{opacity:1;width:100%;transition:width 5s linear}
.dex-project-tabs button.active .tab-progress{transition-duration:5.6s}
.dex-workspace-tabs button span,.dex-project-tabs button span{transition:color .3s ease,transform .3s ease}
.dex-workspace-tabs button.active span,.dex-project-tabs button.active span{color:#ff7b4b;transform:translateX(2px)}
.dex-workspace-tabs button:focus-visible,.dex-project-tabs button:focus-visible,.dex-layer-item:focus-visible,.dex-process-step:focus-visible{outline:2px solid #ff8b5f;outline-offset:4px}
.dex-mini-steps span{transition:color .3s ease,transform .3s ease}.dex-mini-steps span.active{transform:translateY(-2px)}
.dex-loop .loop-ring{animation:dexSpin 22s linear infinite}
.loop-node:hover,.loop-node:focus-visible{transform:scale(1.08);border-color:#ff6b3a;box-shadow:0 0 30px rgba(255,90,31,.18)}
.loop-node.right:hover,.loop-node.right:focus-visible{transform:translateY(-50%) scale(1.08)}
.loop-node.left:hover,.loop-node.left:focus-visible{transform:translateY(-50%) scale(1.08)}
.loop-node.bottom:hover,.loop-node.bottom:focus-visible{transform:translateX(-50%) scale(1.08)}
.loop-node.active{box-shadow:0 0 0 10px rgba(255,90,31,.06),0 15px 35px rgba(255,90,31,.18)}
.dex-final-card{overflow:hidden;position:relative}.dex-final-card:before{content:"";position:absolute;width:520px;height:220px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,90,31,.14),transparent 68%);filter:blur(12px);animation:dexGlow 5s ease-in-out infinite;pointer-events:none}.dex-final-card>*{position:relative}
@keyframes dexReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dexCodeFloat{0%,100%{transform:rotate(-4deg) translate3d(0,0,0)}50%{transform:rotate(-2deg) translate3d(0,-10px,0)}}
@keyframes dexOrbit{to{transform:rotate(360deg)}}
@keyframes dexShapeFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes dexChipFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes dexPulse{0%,100%{box-shadow:0 0 0 10px rgba(255,90,31,.07),0 10px 30px rgba(255,90,31,.20)}50%{box-shadow:0 0 0 16px rgba(255,90,31,.02),0 14px 38px rgba(255,90,31,.28)}}
@keyframes dexCardIn{from{opacity:.75;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dexTabSwap{from{opacity:.45;transform:translateY(7px) scale(.99)}to{opacity:1;transform:none}}
@keyframes dexSpin{to{transform:rotate(360deg)}}
@keyframes dexGlow{0%,100%{opacity:.55;scale:1}50%{opacity:1;scale:1.08}}
@media(max-width:820px){.dex-workspace-tabs button.active,.dex-project-tabs button.active{transform:none}.dex-workspace-tabs button:hover,.dex-project-tabs button:hover{transform:none}.dex-workspace-tabs button .tab-progress,.dex-project-tabs button .tab-progress{display:none}}
@media(prefers-reduced-motion:reduce){.dex-home *, .dex-home *:before,.dex-home *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.dex-code-window,.dex-orbit,.dex-orbit-two,.dex-shape-teal,.dex-shape-orange,.dex-float-chip,.loop-ring{animation:none!important}}


/* =========================================================
   DataEngineerX Home v2.3 — mobile navigation + responsive pass
   ========================================================= */
.dex-header{position:sticky!important;top:0!important;z-index:1000!important}
.dex-nav-wrap{position:relative;min-width:0}
.dex-menu-btn{display:none;position:relative;width:42px;height:42px;flex:0 0 42px;padding:0;border:1px solid #30323b;border-radius:12px;background:#111219;color:#f5f2ef;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;z-index:1010;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.dex-menu-btn:hover{border-color:#ff6a35;background:#17141a}
.dex-menu-btn span{display:block;width:18px;height:2px;border-radius:99px;background:#f5f2ef;transition:transform .28s ease,opacity .2s ease}
.dex-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dex-menu-btn.is-open span:nth-child(2){opacity:0}
.dex-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dex-menu-btn:focus-visible{outline:2px solid #ff8b5f;outline-offset:3px}

/* tablet */
@media (max-width: 1100px){
  .dex-container{width:min(100% - 40px,1240px)}
  .dex-nav-wrap{gap:16px}
  .dex-brand{font-size:17px}
  .dex-nav{gap:2px}
  .dex-nav a{padding:8px 9px;font-size:13px}
  .dex-search{width:150px}
  .dex-nav-cta{padding:10px 14px}
  .dex-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px}
  .dex-hero-copy h1{font-size:clamp(58px,6.5vw,78px)}
  .dex-hero-visual{min-height:560px;transform:scale(.92);transform-origin:center}
  .dex-section{padding:90px 0}
  .dex-section-top{gap:45px}
  .dex-process-card{grid-template-columns:90px 1fr 150px;gap:24px;padding:38px 30px}
}

/* compact/tablet navigation */
@media (max-width: 900px){
  .dex-menu-btn{display:flex}
  .dex-nav-wrap{height:68px;gap:12px}
  .dex-nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;padding:10px;background:rgba(13,14,20,.98);border:1px solid #30323b;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,90,31,.04);backdrop-filter:blur(20px);flex-direction:column;align-items:stretch;gap:4px;z-index:1005;animation:dexMobileNavIn .22s ease both}
  .dex-nav.open{display:flex}
  .dex-nav a{display:flex;align-items:center;min-height:46px;padding:12px 14px;border-radius:10px;font-size:14px;color:#a9aab5}
  .dex-nav a:hover,.dex-nav a.active{color:#fff;background:linear-gradient(90deg,rgba(255,90,31,.15),rgba(255,90,31,.05))}
  .dex-search{margin-left:auto;width:min(190px,28vw)}
  .dex-nav-cta{display:none}
  .dex-hero{min-height:auto;padding:78px 0 65px}
  .dex-hero-grid{grid-template-columns:1fr;gap:30px}
  .dex-hero-copy{max-width:760px}
  .dex-hero-copy h1{font-size:clamp(58px,9vw,78px)}
  .dex-hero-copy>p{max-width:700px}
  .dex-hero-stats{max-width:680px}
  .dex-hero-visual{min-height:560px;transform:none}
  .dex-section-top{grid-template-columns:1fr;gap:12px;margin-bottom:48px}
  .dex-section-top>p{margin:0;max-width:720px}
  .dex-process-track{grid-template-columns:repeat(3,1fr);gap:30px 8px}
  .dex-process-track:before{display:none}
  .dex-process-step>span{margin-bottom:14px}
  .dex-process-card{grid-template-columns:80px 1fr;gap:22px;padding:32px 26px}
  .dex-process-card .outcome{grid-column:2;border-left:0;border-top:1px solid #2d2f37;padding:18px 0 0}
  .dex-layer-layout{grid-template-columns:1fr;gap:28px}
  .dex-layer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-left:0}
  .dex-layer-item{border:1px solid #292b34!important;border-radius:12px;padding:13px!important}
  .dex-layer-item.active{border-color:#ff5a1f!important}
  .dex-path-card{grid-template-columns:45px minmax(0,1fr);gap:12px}
  .path-line{grid-column:2}
  .path-count{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:10px}
  .dex-loop-layout{grid-template-columns:1fr;gap:45px}
  .dex-loop{margin:0 auto}
  .dex-loop-copy{max-width:720px;margin:0 auto}
  .dex-problem-toolbar{grid-template-columns:1fr}
  .dex-workspace-tabs,.dex-project-tabs{grid-template-columns:repeat(3,1fr)}
}

@keyframes dexMobileNavIn{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}

/* phone */
@media (max-width: 640px){
  body.dex-menu-open{overflow:hidden}
  .dex-container{width:calc(100% - 28px)}
  .dex-nav-wrap{height:64px}
  .dex-brand{font-size:15px;gap:8px}
  .dex-brand-mark{width:34px;height:34px;border-radius:10px;font-size:10px}
  .dex-search{display:none}
  .dex-menu-btn{margin-left:auto}
  .dex-nav{top:calc(100% + 8px);left:0;right:0;padding:8px;border-radius:14px}
  .dex-nav a{min-height:48px;padding:13px 14px}

  .dex-hero{padding:48px 0 45px}
  .dex-kicker{font-size:11px;padding:7px 11px;max-width:100%;white-space:normal}
  .dex-hero-copy h1{font-size:clamp(46px,14vw,62px);line-height:.98;letter-spacing:-.06em;margin:25px 0 18px}
  .dex-hero-copy>p{font-size:15px;line-height:1.65;margin-bottom:25px}
  .dex-actions{flex-direction:column;align-items:stretch;gap:10px}
  .dex-btn{width:100%;min-height:50px}
  .dex-hero-stats{grid-template-columns:repeat(2,1fr);margin-top:32px;border-radius:13px}
  .dex-hero-stats div{padding:15px 13px;min-height:74px}
  .dex-hero-stats strong{font-size:21px}
  .dex-hero-stats small{font-size:9px}

  .dex-hero-visual{min-height:350px;width:calc(100vw - 28px);margin-left:50%;transform:translateX(-50%);overflow:visible}
  .dex-orbit{width:min(82vw,330px);height:min(82vw,330px)}
  .dex-orbit-two{width:min(64vw,260px);height:min(64vw,260px)}
  .dex-code-window{width:min(86vw,350px);height:315px;border-radius:13px}
  .dex-window-bar{height:40px;padding:0 12px}
  .w-dot{width:8px;height:8px}
  .dex-file{font-size:10px;margin-left:7px}
  .dex-code-window pre{padding:13px 14px;font-size:9px;line-height:1.9}
  .dex-result{padding:8px 11px;font-size:8px}
  .dex-float-chip{padding:7px 9px;gap:7px;border-radius:11px;transform:scale(.74);transform-origin:center}
  .dex-float-chip b{width:29px;height:29px}
  .dex-float-chip span{font-size:10px}
  .chip-sql{right:-6%;top:8%}
  .chip-de{right:-10%;bottom:21%}
  .chip-py{left:-8%;bottom:0}
  .dex-shape-teal{width:95px;height:160px;right:-1%;top:32%}
  .dex-shape-orange{width:105px;height:65px;right:8%;bottom:6%}

  .dex-section{padding:72px 0}
  .dex-section-top{margin-bottom:38px}
  .dex-section-top h2,.dex-centered-head h2{font-size:clamp(38px,11vw,50px);line-height:1.02}
  .dex-section-top>p,.dex-centered-head p{font-size:14px;line-height:1.7}
  .dex-process-track{grid-template-columns:repeat(2,1fr);gap:22px 6px;margin-bottom:40px}
  .dex-process-step{padding:0 4px}
  .dex-process-step>span{width:50px;height:50px;margin-bottom:11px}
  .dex-process-step strong{font-size:14px}
  .dex-process-step small{font-size:11px}
  .dex-process-card{grid-template-columns:1fr;gap:8px;padding:25px 20px;border-radius:14px}
  .stage-number{font-size:38px}
  .dex-process-card h3{font-size:21px;margin:6px 0 8px}
  .dex-process-card p{font-size:14px;line-height:1.7}
  .dex-process-card .outcome{grid-column:auto;padding-top:15px;margin-top:10px}
  .dex-progress{margin:14px 0 0}

  .dex-layer-nav{grid-template-columns:repeat(2,1fr);gap:7px}
  .dex-layer-item{padding:12px!important;min-height:88px}
  .dex-layer-item strong{font-size:14px}
  .dex-layer-item small{font-size:11px;line-height:1.35}
  .dex-layer-card{min-height:0;border-radius:14px}
  .dex-card-head{padding:14px 15px;font-size:9px}
  .dex-layer-body{padding:27px 18px}
  .dex-layer-body h3{font-size:27px;margin:13px 0}
  .dex-layer-body>p{font-size:14px;line-height:1.7}
  .dex-mini-steps{margin:32px 0;overflow-x:auto;padding-bottom:5px}
  .dex-mini-steps span{min-width:74px;font-size:10px}
  .dex-layer-meta{grid-template-columns:1fr;gap:14px}

  .dex-path-card{grid-template-columns:30px minmax(0,1fr);padding:20px 16px;border-radius:13px}
  .path-no{font-size:11px}
  .path-copy h3{font-size:20px}
  .path-copy p{font-size:13px;line-height:1.6}
  .path-count{grid-column:2}
  .path-count strong{font-size:30px}
  .path-count span{font-size:12px}
  .path-line{display:none}

  .dex-centered-head{text-align:left}
  .dex-loop-layout{gap:32px}
  .dex-loop{width:min(84vw,320px);height:min(84vw,320px)}
  .loop-ring{inset:25px}
  .loop-center{inset:calc(50% - 55px);width:110px;height:110px}
  .loop-center strong{font-size:32px}
  .loop-node{width:58px;height:58px;font-size:12px}
  .dex-loop-copy h3{font-size:28px}
  .dex-loop-copy p{font-size:14px;line-height:1.7}
  .dex-tech-tags{display:flex;flex-wrap:wrap;gap:7px}
  .dex-tech-tags span{padding:8px 11px;font-size:10px}

  .dex-problem-toolbar .tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .dex-problem-toolbar .tabs::-webkit-scrollbar{display:none}
  .dex-problem-toolbar button{white-space:nowrap}
  .dex-problem-list>a{grid-template-columns:24px minmax(0,1fr) 20px;padding:18px 12px}
  .dex-problem-list>a>b{display:none}
  .dex-problem-list>a>div:nth-child(2) p{font-size:12px}

  .dex-workspace-tabs,.dex-project-tabs{grid-template-columns:1fr}
  .dex-workspace-tabs button,.dex-project-tabs button{min-height:88px;text-align:left}
  .dex-editor-card>div{padding:24px 18px}
  .dex-editor-card h3{font-size:25px}
  .dex-project-detail{padding:23px 18px}
  .project-meta{grid-template-columns:1fr}
  .project-steps{grid-template-columns:repeat(2,1fr)}
  .dex-final-card{min-height:390px;padding:24px 17px;border-radius:15px}
  .dex-final-card h2{font-size:clamp(38px,11vw,50px)}
  .site-footer .footer-grid{grid-template-columns:1fr}
}

/* very small phones */
@media (max-width: 380px){
  .dex-container{width:calc(100% - 22px)}
  .dex-brand{font-size:14px}
  .dex-menu-btn{width:40px;height:40px;flex-basis:40px}
  .dex-hero-copy h1{font-size:44px}
  .dex-hero-visual{min-height:315px}
  .dex-code-window{height:285px}
  .dex-float-chip{transform:scale(.64)}
  .dex-process-track{grid-template-columns:1fr 1fr}
  .dex-process-step small{font-size:10px}
  .dex-loop{width:285px;height:285px}
  .loop-center{width:96px;height:96px;inset:calc(50% - 48px)}
  .loop-center strong{font-size:28px}
  .loop-node{width:52px;height:52px}
}

@media(prefers-reduced-motion:reduce){
  .dex-nav{animation:none}
}


/* =========================================================
   DataEngineerX Home v2.4 — guaranteed mobile navigation
   ========================================================= */
.dex-mobile-header{display:none!important}
.dex-mobile-menu-btn{display:none}

@media (max-width:900px){
  /* Global mobile header: it lives in header.php so it cannot disappear with a page template. */
  .dex-header{display:none!important}
  .dex-mobile-header{display:block!important;position:sticky;top:0;left:0;width:100%;z-index:99999;background:rgba(9,10,15,.98);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  body.admin-bar .dex-mobile-header{top:46px}
  .dex-mobile-header-inner{height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .dex-mobile-header .dex-brand{font-size:16px}
  .dex-mobile-header .dex-brand-mark{width:36px;height:36px;border-radius:10px}
  .dex-mobile-menu-btn{display:flex;width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;border:1px solid #343640;border-radius:12px;background:#111219;color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.24);position:relative;z-index:1202}
  .dex-mobile-menu-btn span{display:block;width:19px;height:2px;border-radius:99px;background:#f4f2ef;transition:transform .25s ease,opacity .2s ease}
  .dex-mobile-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .dex-mobile-menu-btn.is-open span:nth-child(2){opacity:0}
  .dex-mobile-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .dex-mobile-menu-btn:focus-visible{outline:2px solid #ff8b5f;outline-offset:3px}
  .dex-mobile-nav{position:absolute;left:14px;right:14px;top:calc(100% + 8px);padding:8px;border:1px solid #30323b;border-radius:16px;background:rgba(13,14,20,.985);box-shadow:0 25px 70px rgba(0,0,0,.58),0 0 0 1px rgba(255,90,31,.04);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .dex-mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:4px;animation:dexMobileNavIn .2s ease both}
  .dex-mobile-nav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:13px 14px;border-radius:11px;color:#a9aab5;font-size:15px;font-weight:600;text-decoration:none}
  .dex-mobile-nav a:hover,.dex-mobile-nav a:focus-visible{color:#fff;background:linear-gradient(90deg,rgba(255,90,31,.16),rgba(255,90,31,.05));outline:0}
  .dex-mobile-nav a.active{color:#fff;background:linear-gradient(90deg,rgba(255,90,31,.20),rgba(255,90,31,.06));box-shadow:inset 2px 0 0 #ff5a1f}
  .dex-mobile-nav .mobile-nav-cta{margin-top:5px;justify-content:center;color:#101116;background:linear-gradient(100deg,#ff5a1f,#ffd13f);box-shadow:0 10px 28px rgba(255,90,31,.2)}
  .dex-mobile-nav .mobile-nav-cta:hover,.dex-mobile-nav .mobile-nav-cta:focus-visible{color:#101116;background:linear-gradient(100deg,#ff6a2f,#ffd13f)}
  body.dex-menu-open{overflow:hidden}
}
@media (max-width:380px){
  .dex-mobile-header-inner{height:62px}
  .dex-mobile-header .dex-brand{font-size:14px}
  .dex-mobile-header .dex-brand-mark{width:33px;height:33px}
  .dex-mobile-menu-btn{width:42px;height:42px;flex-basis:42px}
  .dex-mobile-nav{left:10px;right:10px}
}
@media (min-width:901px){.dex-mobile-header{display:none!important}}

/* v2.5 mobile-header hardening */
@media (max-width:900px){
  html,body{overflow-x:hidden}
  .dex-mobile-header{visibility:visible!important;opacity:1!important;transform:none!important}
  .dex-mobile-header-inner{position:relative;min-height:68px;padding:0 14px}
  .dex-mobile-header .dex-brand{display:inline-flex!important;visibility:visible!important;opacity:1!important}
  .dex-mobile-menu-btn{display:flex!important;visibility:visible!important;opacity:1!important}
  .dex-mobile-nav{z-index:100000}
}
@media (max-width:380px){
  .dex-mobile-header-inner{min-height:62px;padding:0 10px}
}

/* =========================================================
   DataEngineerX Home v2.6 — true mobile layout hardening
   Prevent grid children, curriculum tabs and cards from
   creating horizontal overflow on narrow screens.
   ========================================================= */
.dex-home,
.dex-home section,
.dex-home .dex-container,
.dex-home .dex-layer-layout,
.dex-home .dex-layer-card,
.dex-home .dex-layer-body,
.dex-home .dex-section-top {
  min-width: 0;
}

.dex-home .dex-layer-card,
.dex-home .dex-layer-body,
.dex-home .dex-card-head {
  max-width: 100%;
  box-sizing: border-box;
}

.dex-home .dex-card-head {
  min-width: 0;
  gap: 12px;
}
.dex-home .dex-card-head span,
.dex-home .dex-card-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .dex-home .dex-container { width: calc(100% - 28px); }

  /* The six layer choices are cards, but each card must shrink inside
     the two-column grid instead of forcing the grid wider than the phone. */
  .dex-home .dex-layer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 18px;
  }
  .dex-home .dex-layer-nav {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dex-home .dex-layer-item {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
  .dex-home .dex-layer-item strong,
  .dex-home .dex-layer-item small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dex-home .dex-layer-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .dex-home .dex-card-head {
    width: 100%;
    padding: 13px 14px;
  }
  .dex-home .dex-card-head b {
    max-width: 42%;
    font-size: 8px;
  }
  .dex-home .dex-layer-body {
    width: 100%;
    min-width: 0;
    padding: 25px 16px;
    overflow: hidden;
  }
  .dex-home .dex-layer-body h3 {
    max-width: 100%;
    font-size: clamp(23px, 7.4vw, 28px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .dex-home .dex-layer-body > p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Curriculum steps become a contained horizontal scroller. The card
     itself never becomes wider than the viewport. */
  .dex-home .dex-mini-steps {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 30px 0 26px;
    padding: 13px 0 12px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dex-home .dex-mini-steps::-webkit-scrollbar { display: none; }
  .dex-home .dex-mini-steps span {
    flex: 0 0 68px;
    min-width: 68px;
    font-size: 9px;
    white-space: nowrap;
  }
  .dex-home .dex-mini-steps small {
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  .dex-home .dex-layer-meta {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dex-home .dex-layer-meta > div {
    min-width: 0;
    padding: 13px 0;
    border-top: 1px solid #292b34;
  }
  .dex-home .dex-layer-meta b {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .dex-home .dex-container { width: calc(100% - 22px); }
  .dex-home .dex-layer-nav { gap: 6px; }
  .dex-home .dex-layer-item { padding: 11px !important; min-height: 84px; }
  .dex-home .dex-layer-item strong { font-size: 13px; }
  .dex-home .dex-layer-item small { font-size: 10px; }
  .dex-home .dex-layer-body { padding: 22px 14px; }
  .dex-home .dex-card-head b { max-width: 38%; }
  .dex-home .dex-layer-body h3 { font-size: 23px; }
  .dex-home .dex-mini-steps span { flex-basis: 64px; min-width: 64px; }
}

/* =========================================================
   DataEngineerX Home v2.7 — mobile hero visual containment
   Keep the animated SQL preview fully inside the viewport.
   ========================================================= */
@media (max-width: 640px){
  .dex-hero-visual{
    width:100%;
    max-width:100%;
    min-height:330px;
    margin:8px 0 0;
    transform:none!important;
    overflow:hidden;
    display:block;
    position:relative;
    contain:layout paint;
  }
  .dex-hero-visual .dex-orbit{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(82vw,310px);
    height:min(82vw,310px);
  }
  .dex-hero-visual .dex-orbit-two{
    width:min(64vw,245px);
    height:min(64vw,245px);
  }
  .dex-hero-visual .dex-code-window{
    position:absolute;
    left:50%;
    top:50%;
    width:min(88vw,330px);
    max-width:330px;
    height:285px;
    margin:0;
    transform:translate(-50%,-50%) rotate(-2deg);
    animation:dexCodeFloatMobile 6s ease-in-out infinite;
    transform-origin:center center;
  }
  .dex-hero-visual .dex-window-bar{height:40px;padding:0 11px}
  .dex-hero-visual .dex-code-window pre{padding:12px 13px;font-size:8px;line-height:1.85}
  .dex-hero-visual .dex-result{padding:8px 10px;font-size:8px}
  .dex-hero-visual .dex-float-chip{transform:scale(.68);transform-origin:center center;z-index:8}
  .dex-hero-visual .chip-sql{right:1%;top:2%;}
  .dex-hero-visual .chip-de{right:0;bottom:15%;}
  .dex-hero-visual .chip-py{left:2%;bottom:0;}
  .dex-hero-visual .dex-shape-teal{right:-2%;top:28%;width:78px;height:135px;opacity:.72}
  .dex-hero-visual .dex-shape-orange{right:5%;bottom:4%;width:90px;height:52px;opacity:.78}
}
@keyframes dexCodeFloatMobile{
  0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}
  50%{transform:translate(-50%,calc(-50% - 7px)) rotate(0deg)}
}
@media (max-width:380px){
  .dex-hero-visual{min-height:300px;margin-top:5px}
  .dex-hero-visual .dex-code-window{width:min(89vw,318px);height:270px}
  .dex-hero-visual .dex-code-window pre{font-size:7.5px;line-height:1.75;padding:11px}
  .dex-hero-visual .dex-result{font-size:7px}
  .dex-hero-visual .dex-float-chip{transform:scale(.60)}
  .dex-hero-visual .chip-sql{right:-1%;top:1%}
  .dex-hero-visual .chip-de{right:-1%;bottom:13%}
  .dex-hero-visual .chip-py{left:-1%;bottom:-1%}
}

/* =========================================================
   DataEngineerX Learn v1.7.1 — responsive hardening
   ========================================================= */
.dex-learn-page{
  --learn-orange:#ff6328;--learn-yellow:#ffc83d;--learn-teal:#19d5bd;--learn-purple:#a786ff;
  --learn-card:#111319;--learn-card2:#0d0f14;--learn-line:#292d38;--learn-muted:#9298a8;
  position:relative;isolation:isolate;overflow:clip;background:#08090d;color:#f6f4f2;
}
.dex-learn-page *{box-sizing:border-box;min-width:0}
.dex-learn-page a{color:inherit;text-decoration:none}
.dex-learn-page .learn-hero{width:min(1530px,calc(100% - 86px));margin:0 auto;padding:72px 0 78px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:70px;align-items:center;min-height:680px;background:radial-gradient(circle at 4% 12%,rgba(255,88,42,.15),transparent 32%),radial-gradient(circle at 100% 90%,rgba(20,210,190,.07),transparent 28%)}
.dex-learn-page .learn-hero-copy{min-width:0}
.dex-learn-page .learn-hero-title{font:700 clamp(56px,5.1vw,86px)/.99 "Space Grotesk",sans-serif;letter-spacing:-3.5px}
.dex-learn-page .learn-hero-title span{background:linear-gradient(100deg,#ff5c27,#ffc83d);-webkit-background-clip:text;background-clip:text;color:transparent}
.dex-learn-page .learn-hero-copy>p{max-width:700px;margin:34px 0;font-size:18px;line-height:1.8;color:#9ca3b5}
.dex-learn-page .learn-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,235px));gap:12px;max-width:500px}
.dex-learn-page .learn-proof-grid>div{min-height:74px;border:1px solid #292d36;background:rgba(15,17,23,.76);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center}
.dex-learn-page .learn-proof-grid b{grid-row:1/3;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#281715;color:#ff6b32;font-size:20px}
.dex-learn-page .learn-proof-grid>div:nth-child(2) b{background:#0d2928;color:#1bd4bd}.dex-learn-page .learn-proof-grid>div:nth-child(3) b{background:#282419;color:#ffd02d}.dex-learn-page .learn-proof-grid>div:nth-child(4) b{background:#211b31;color:#a98bff}
.dex-learn-page .learn-proof-grid strong{font-size:14px;line-height:1.2}.dex-learn-page .learn-proof-grid small{font-size:11px;color:#747b8b}
.dex-learn-page .learn-hero-actions{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap}.dex-learn-page .learn-primary,.dex-learn-page .learn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:54px;border-radius:30px;padding:0 28px;font-weight:700}.dex-learn-page .learn-primary{color:#fff;background:linear-gradient(100deg,#ff5b28,#ffcf3e);box-shadow:0 15px 35px rgba(255,93,40,.22)}.dex-learn-page .learn-primary span{margin-left:13px;font-size:18px}.dex-learn-page .learn-secondary{border:1px solid #383c48;background:#0e1015}.dex-learn-page .learn-text-link{font-weight:600;color:#aeb5c7;padding:12px 10px}
.dex-learn-page .learn-visual{position:relative;min-width:0;min-height:488px;border:1px solid #2a2e39;border-radius:30px;background:radial-gradient(circle at 50% 52%,rgba(92,97,130,.07),transparent 35%),linear-gradient(135deg,#0c0e13,#090b0f);overflow:hidden;padding:92px 20px 75px}.dex-learn-page .learn-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:62px 62px;opacity:.65;pointer-events:none}
.dex-learn-page .learn-visual-top,.dex-learn-page .learn-source-badge,.dex-learn-page .learn-business,.dex-learn-page .learn-stack-row,.dex-learn-page .learn-stack-line{position:relative;z-index:1}
.dex-learn-page .learn-visual-top{position:absolute;right:20px;top:20px;border:1px solid #8b341d;border-radius:16px;padding:13px 17px 11px;min-width:245px;background:#111217;box-shadow:0 10px 30px rgba(0,0,0,.25);color:#ff6a2d}.dex-learn-page .learn-visual-top strong{display:block;color:#f2f1ef;font-size:14px;margin-left:25px;margin-top:-21px}.dex-learn-page .learn-visual-top small{display:block;color:#777f92;font-size:10px;margin-left:25px;margin-top:3px}
.dex-learn-page .learn-source-badge{position:absolute;left:20px;top:92px;border:1px solid #3a4a6d;background:#111722;border-radius:14px;padding:12px 16px;color:#f3f5f9;font-size:12px;font-weight:700}.dex-learn-page .learn-source-badge small,.dex-learn-page .learn-business small{display:block;color:#65718a;font:10px "DM Mono",monospace;margin-top:4px}.dex-learn-page .learn-business{position:absolute;right:20px;top:82px;border:1px solid #38415a;border-radius:14px;padding:11px 16px;background:#151821;font-size:11px;font-weight:700}
.dex-learn-page .learn-stack-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:108px}.dex-learn-page .stack-node{height:150px;border:1px solid #34405b;border-radius:17px;background:linear-gradient(180deg,#191c28,#12151d);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 5px;transition:transform .25s,border-color .25s,box-shadow .25s}.dex-learn-page .stack-node:hover{transform:translateY(-6px);border-color:#697b9e;box-shadow:0 15px 30px rgba(0,0,0,.3)}.dex-learn-page .stack-node i{font-style:normal;font-size:38px;line-height:1;margin-bottom:12px;color:#378eea}.dex-learn-page .stack-node:nth-child(2) i{color:#ff6b30}.dex-learn-page .stack-node:nth-child(3) i{color:#377fdf}.dex-learn-page .stack-node:nth-child(4) i{color:#ff642e}.dex-learn-page .stack-node:nth-child(5) i{color:#1ed5bd}.dex-learn-page .stack-node:nth-child(6) i{color:#ffd33a}.dex-learn-page .stack-node b{font-size:13px}.dex-learn-page .stack-node small{margin-top:3px;color:#778096;font:9px "DM Mono",monospace}.dex-learn-page .learn-stack-line{position:absolute;bottom:30px;left:42px;right:42px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;color:#68758d;font:10px "DM Mono",monospace;letter-spacing:1.5px}.dex-learn-page .learn-stack-line span{white-space:nowrap}
/* Roadmap: desktop matches the reference card, with the line exactly through circle centers. */
.dex-learn-page .learn-stage-nav{position:sticky;top:72px;z-index:30;width:min(1530px,calc(100% - 30px));min-height:170px;margin:18px auto 24px;padding:50px 26px 20px;border:1px solid #303541;border-radius:20px;background:linear-gradient(135deg,#0d1016 0%,#0b0d12 58%,#0d1115 100%);box-shadow:0 18px 50px rgba(0,0,0,.18);display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 205px;align-items:start;overflow:hidden}
.dex-learn-page .learn-stage-nav:after{content:"LEARNING ROADMAP";position:absolute;left:30px;top:25px;color:#7d8aa2;font:700 10px "DM Mono",monospace;letter-spacing:3px;pointer-events:none}.dex-learn-page .learn-stage-nav:before{content:"";position:absolute;left:110px;right:240px;top:79px;height:2px;background:linear-gradient(90deg,#ff6a2d 0%,#ff6a2d 18%,#ffd329 38%,#18d6bd 64%,#a786ff 100%);opacity:.58;pointer-events:none}
.dex-learn-page .learn-stage-nav>a{position:relative;z-index:2;text-align:center;padding:8px 8px 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.dex-learn-page .learn-stage-nav>a span{display:grid;place-items:center;margin:0 auto 9px;width:40px;height:40px;border:2px solid #4b5872;border-radius:50%;background:#10131a;color:#b9c0d0;font:700 12px "DM Mono",monospace;box-shadow:0 0 0 4px #0d1016}.dex-learn-page .learn-stage-nav>a.is-active span{border-color:#ff5d29;color:#ff6b31;box-shadow:0 0 0 4px #0d1016,0 0 0 7px rgba(255,93,41,.09)}.dex-learn-page .learn-stage-nav>a b{display:block;font-size:14px;line-height:1.18;white-space:normal}.dex-learn-page .learn-stage-nav>a small{display:block;margin-top:5px;color:#71809a;font-size:11px;line-height:1.25;max-width:165px}.dex-learn-page .learn-stage-cta{position:relative;z-index:2;border-left:1px solid #2b2f39;min-height:70px;margin-top:8px;padding-left:28px;display:flex;align-items:center;justify-content:center;gap:14px;color:#ff6730;font:700 12px "DM Mono",monospace;letter-spacing:2px;line-height:1.3}.dex-learn-page .learn-stage-cta:first-letter{font-size:20px}
.dex-learn-page .learn-stage-list{width:min(1450px,calc(100% - 130px));margin:0 auto}.dex-learn-page .learn-stage{position:relative;padding:68px 0 76px 58px;border-left:2px solid var(--stage-accent);scroll-margin-top:180px}.dex-learn-page .learn-stage-marker{position:absolute;left:-25px;top:22px;width:50px;height:50px;border:1px solid #353a47;border-radius:14px;background:#171923;display:grid;place-items:center;box-shadow:0 0 0 6px #08090d}.dex-learn-page .learn-stage-marker span{font:700 12px "DM Mono",monospace;color:var(--stage-accent)}.dex-learn-page .learn-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:28px}.dex-learn-page .learn-kicker{font:700 11px "DM Mono",monospace;letter-spacing:2px;color:var(--stage-accent);margin-bottom:10px}.dex-learn-page .learn-stage-head h2{font-size:34px;letter-spacing:-1.2px;margin:0 0 8px}.dex-learn-page .learn-stage-head p{max-width:760px;font-size:16px;color:#9ba2b4;margin:0;line-height:1.55}.dex-learn-page .learn-stage-tag{border:1px solid #303540;border-radius:18px;padding:9px 15px;color:#b7bfd0;font:10px "DM Mono",monospace;white-space:nowrap}.dex-learn-page .learn-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dex-learn-page .learn-card{min-width:0;position:relative;border:1px solid #2a2e39;border-radius:15px;background:linear-gradient(145deg,#11131a,#101218);padding:21px 20px 20px;min-height:185px;overflow:hidden}.dex-learn-page .learn-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stage-accent)}.dex-learn-page .learn-card-code{position:absolute;left:20px;top:22px;color:var(--stage-accent);font:700 11px "DM Mono",monospace}.dex-learn-page .learn-card-title{padding-left:44px}.dex-learn-page .learn-card-title h3{font-size:18px;margin:0 0 1px;letter-spacing:-.3px}.dex-learn-page .learn-card-title span{color:#71798c;font:10px "DM Mono",monospace;letter-spacing:1px}.dex-learn-page .learn-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.dex-learn-page .learn-pills span{border:1px solid #2b303b;background:#15171e;border-radius:7px;padding:6px 9px;color:#aab1c0;font-size:11px;line-height:1.05}.dex-learn-page .learn-checkpoint{display:flex;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid rgba(24,213,189,.25);border-radius:9px;background:rgba(24,213,189,.06);color:#e0e8e7;font-size:12px;line-height:1.5}.dex-learn-page .learn-checkpoint strong{font:700 10px "DM Mono",monospace;letter-spacing:1px;color:#1ed8c1;white-space:nowrap}
.dex-learn-page .learn-stage:nth-child(2) .learn-card:before{background:#ffd329}.dex-learn-page .learn-stage:nth-child(3) .learn-card:before,.dex-learn-page .learn-stage:nth-child(4) .learn-card:before{background:#18d6bd}.dex-learn-page .learn-stage:nth-child(5) .learn-card:before{background:#a786ff}
/* Tablet */
@media (max-width:1100px){
  .dex-learn-page .learn-hero{width:min(900px,calc(100% - 40px));grid-template-columns:1fr;gap:40px;min-height:0;padding:60px 0}.dex-learn-page .learn-visual{max-width:900px;width:100%}
  .dex-learn-page .learn-stage-nav{position:relative;top:auto;width:min(900px,calc(100% - 40px));grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 20px 18px;min-height:180px}/* Mobile roadmap connector: draw the line between each stage circle inside the horizontal scroller. */
  .dex-learn-page .learn-stage-nav>a:not(:last-of-type)::after{content:"";position:absolute;z-index:0;top:16px;left:50%;width:138px;height:2px;background:linear-gradient(90deg,#ff6a2d 0%,#ff9d2f 100%);opacity:.58;pointer-events:none}
  .dex-learn-page .learn-stage-nav>a:nth-of-type(2)::after{background:linear-gradient(90deg,#ffd329 0%,#18d6bd 100%)}
  .dex-learn-page .learn-stage-nav>a:nth-of-type(3)::after{background:linear-gradient(90deg,#18d6bd 0%,#31cfd2 100%)}
  .dex-learn-page .learn-stage-nav>a:nth-of-type(4)::after{background:linear-gradient(90deg,#31cfd2 0%,#a786ff 100%)}
  .dex-learn-page .learn-stage-nav>a:nth-of-type(5)::after{background:linear-gradient(90deg,#a786ff 0%,#8e7cff 100%)}
  .dex-learn-page .learn-stage-nav>a span{position:relative;z-index:2}

  .dex-learn-page .learn-stage-list{width:min(900px,calc(100% - 40px))}.dex-learn-page .learn-stage{padding-left:48px}.dex-learn-page .learn-stage-head h2{font-size:30px}
}
/* Mobile: the roadmap is its own scroller; it never overlays stage content. */
@media (max-width:700px){
  .dex-learn-page{overflow-x:clip}
  .dex-learn-page .learn-hero{width:calc(100% - 28px);padding:44px 0 42px;grid-template-columns:1fr;gap:28px;min-height:0}.dex-learn-page .learn-hero-title{font-size:clamp(44px,12.5vw,62px);letter-spacing:-2.5px}.dex-learn-page .learn-hero-copy>p{font-size:15px;line-height:1.7;margin:22px 0}.dex-learn-page .learn-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:none}.dex-learn-page .learn-proof-grid>div{padding:11px;grid-template-columns:34px minmax(0,1fr);column-gap:9px}.dex-learn-page .learn-proof-grid b{width:34px;height:34px;font-size:16px}.dex-learn-page .learn-proof-grid strong{font-size:12px}.dex-learn-page .learn-proof-grid small{font-size:9px}.dex-learn-page .learn-hero-actions{gap:9px;margin-top:24px}.dex-learn-page .learn-primary,.dex-learn-page .learn-secondary{min-height:48px;padding:0 18px;font-size:13px}.dex-learn-page .learn-text-link{width:100%;padding:8px 0}
  .dex-learn-page .learn-visual{width:100%;min-height:405px;padding:120px 10px 60px;border-radius:20px}.dex-learn-page .learn-visual-top{right:12px;top:12px;min-width:0;width:auto;max-width:calc(100% - 24px);padding:9px 11px}.dex-learn-page .learn-visual-top strong{font-size:12px}.dex-learn-page .learn-source-badge{left:12px;top:76px;font-size:10px;padding:9px 11px}.dex-learn-page .learn-business{right:12px;top:76px;padding:8px 11px;font-size:9px}.dex-learn-page .learn-stack-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:30px}.dex-learn-page .stack-node{height:108px;border-radius:12px}.dex-learn-page .stack-node i{font-size:28px;margin-bottom:7px}.dex-learn-page .stack-node b{font-size:10px}.dex-learn-page .stack-node small{font-size:7px}.dex-learn-page .learn-stack-line{left:15px;right:15px;bottom:17px;gap:8px;display:flex;overflow-x:auto;font-size:8px;scrollbar-width:none}.dex-learn-page .learn-stack-line::-webkit-scrollbar{display:none}
  .dex-learn-page .learn-stage-nav{position:relative;top:auto;z-index:20;width:calc(100% - 20px);min-height:126px;height:126px;margin:12px 10px 30px;padding:15px 10px 18px;display:flex;align-items:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#59647b #171a22;touch-action:pan-x;overscroll-behavior-x:contain;border-radius:16px;contain:layout paint}.dex-learn-page .learn-stage-nav::-webkit-scrollbar{display:block;height:5px}.dex-learn-page .learn-stage-nav::-webkit-scrollbar-track{background:#171a22;border-radius:999px;margin:0 10px}.dex-learn-page .learn-stage-nav::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#ff6328,#ffc83d,#19d5bd);border-radius:999px;min-width:44px}.dex-learn-page .learn-stage-nav::-webkit-scrollbar-thumb:hover{background:#ffc83d}.dex-learn-page .learn-stage-nav:after,.dex-learn-page .learn-stage-cta{display:none}
  .dex-learn-page .learn-stage-nav:before{content:"";display:block;position:absolute;left:calc(10px + 17px);top:47px;width:calc(6 * 138px - 138px);height:2px;background:linear-gradient(90deg,#ff6a2d 0%,#ff6a2d 18%,#ffd329 38%,#18d6bd 64%,#a786ff 100%);opacity:.62;pointer-events:none;z-index:1}
  .dex-learn-page .learn-stage-nav>a:not(:last-of-type)::after{content:"";position:absolute;left:50%;top:31px;width:138px;height:2px;background:linear-gradient(90deg,rgba(255,106,45,.75),rgba(24,214,189,.7));opacity:.65;pointer-events:none;z-index:1}
  .dex-learn-page .learn-stage-nav>a span{position:relative;z-index:3}
  .dex-learn-page .learn-stage-nav>a{position:relative;flex:0 0 138px;width:138px;min-width:138px;padding:0 4px;text-align:center;scroll-snap-align:start}.dex-learn-page .learn-stage-nav>a span{width:34px;height:34px;margin-bottom:7px;font-size:10px;box-shadow:0 0 0 3px #0d1016}.dex-learn-page .learn-stage-nav>a.is-active span{box-shadow:0 0 0 3px #0d1016,0 0 0 6px rgba(255,93,41,.09)}.dex-learn-page .learn-stage-nav>a b{font-size:11px;line-height:1.12}.dex-learn-page .learn-stage-nav>a small{font-size:8px;line-height:1.25;max-width:130px;margin-top:4px}
  .dex-learn-page .learn-stage-list{width:calc(100% - 20px);margin:0 10px}.dex-learn-page .learn-stage{padding:48px 0 48px 28px;scroll-margin-top:20px;border-left-width:2px}.dex-learn-page .learn-stage-marker{left:-18px;top:20px;width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 5px #08090d}.dex-learn-page .learn-stage-marker span{font-size:10px}.dex-learn-page .learn-stage-head{display:block;margin-bottom:20px}.dex-learn-page .learn-kicker{font-size:9px;letter-spacing:1.6px}.dex-learn-page .learn-stage-head h2{font-size:26px;line-height:1.1}.dex-learn-page .learn-stage-head p{font-size:14px;line-height:1.6}.dex-learn-page .learn-stage-tag{display:inline-flex;margin-top:12px;max-width:100%;white-space:normal}.dex-learn-page .learn-card-grid{grid-template-columns:1fr;gap:10px}.dex-learn-page .learn-card{padding:18px 15px 16px;min-height:0}.dex-learn-page .learn-card-code{left:15px;top:19px}.dex-learn-page .learn-card-title{padding-left:38px}.dex-learn-page .learn-card-title h3{font-size:16px;line-height:1.25}.dex-learn-page .learn-pills{gap:6px;margin-top:14px}.dex-learn-page .learn-pills span{font-size:10px;padding:6px 7px;line-height:1.15}.dex-learn-page .learn-checkpoint{font-size:11px;gap:8px;align-items:flex-start}.dex-learn-page .learn-checkpoint strong{font-size:9px}
}
@media (max-width:480px){
  .dex-learn-page .learn-hero{width:calc(100% - 20px);padding-top:34px}.dex-learn-page .learn-hero-title{font-size:clamp(42px,12vw,54px)}.dex-learn-page .learn-proof-grid{grid-template-columns:1fr 1fr}.dex-learn-page .learn-proof-grid>div{min-height:68px}.dex-learn-page .learn-hero-actions{display:grid;grid-template-columns:1fr 1fr}.dex-learn-page .learn-primary{grid-column:1/-1;width:100%}.dex-learn-page .learn-secondary{width:100%}.dex-learn-page .learn-text-link{grid-column:1/-1;text-align:center}
  .dex-learn-page .learn-visual{min-height:390px;padding-top:118px}.dex-learn-page .learn-stack-row{margin-top:28px}.dex-learn-page .stack-node{height:98px}.dex-learn-page .stack-node i{font-size:24px}.dex-learn-page .stack-node b{font-size:9px}.dex-learn-page .stack-node small{font-size:6.5px}
  .dex-learn-page .learn-stage-nav{height:124px;min-height:124px;margin-bottom:26px;padding-top:13px}.dex-learn-page .learn-stage-nav>a{flex-basis:128px;min-width:128px;width:128px}.dex-learn-page .learn-stage{padding-left:26px}.dex-learn-page .learn-stage-head h2{font-size:24px}.dex-learn-page .learn-card-title h3{font-size:15px}
  .dex-learn-page .learn-stage-nav>a:not(:last-of-type)::after{width:128px;top:16px}
}
@media (max-width:380px){
  .dex-learn-page .learn-proof-grid{grid-template-columns:1fr}.dex-learn-page .learn-hero-title{font-size:42px}.dex-learn-page .learn-visual{min-height:420px}.dex-learn-page .learn-stack-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:42px}.dex-learn-page .learn-stack-line{display:none}.dex-learn-page .learn-stage-nav{width:calc(100% - 16px);margin-left:8px;margin-right:8px;height:122px;min-height:122px}.dex-learn-page .learn-stage-nav>a{flex-basis:122px;min-width:122px;width:122px}.dex-learn-page .learn-stage-list{width:calc(100% - 16px);margin-left:8px;margin-right:8px}.dex-learn-page .learn-stage{padding-left:24px}.dex-learn-page .learn-stage-head h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){.dex-learn-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.dex-learn-page .stack-node:hover{transform:none}}
@media (max-width:700px){
  .dex-learn-page .learn-stage-nav{cursor:grab}
  .dex-learn-page .learn-stage-nav.is-dragging{cursor:grabbing;scroll-snap-type:none}
}

/* =========================================================
   PROBLEMS SCREEN v1 — Practice Lab
   ========================================================= */
.problems-page{background:#08090b;color:#f5f6f8;overflow:hidden}
.problems-page .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.problems-hero{position:relative;padding:108px 0 92px;border-bottom:1px solid #24272d;background:radial-gradient(circle at 78% 32%,rgba(255,70,45,.12),transparent 28%),radial-gradient(circle at 20% 100%,rgba(255,183,0,.06),transparent 34%),#08090b}
.problems-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}
.problems-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.82fr);gap:72px;align-items:center}
.problems-eyebrow{display:flex;align-items:center;gap:9px;color:#8f959e;font:700 11px/1.2 "Space Grotesk",Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.problems-eyebrow>span:first-child{width:24px;height:1px;background:#ff4a38;display:inline-block}
.problems-hero h1{font:700 clamp(58px,7.4vw,94px)/.91 "Space Grotesk",Inter,sans-serif;letter-spacing:-.065em;margin:22px 0 26px}
.problems-hero h1 em,.problems-section-intro h2 em,.problems-method h2 em,.problems-cta h2 em{font-style:normal;background:linear-gradient(100deg,#ff4b38,#ffbd18);-webkit-background-clip:text;background-clip:text;color:transparent}
.problems-hero-copy>p{max-width:650px;color:#aeb3bc;font-size:17px;line-height:1.8;margin:0}
.problems-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.problems-primary-btn,.problems-secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:9px;padding:13px 18px;font:700 13px "Space Grotesk",Inter,sans-serif;letter-spacing:.01em;transition:transform .2s,border-color .2s,box-shadow .2s}
.problems-primary-btn{background:linear-gradient(100deg,#ff4b37,#ffb914);color:#08090b;border:1px solid rgba(255,185,20,.5);box-shadow:0 12px 35px rgba(255,75,55,.16)}
.problems-primary-btn:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(255,75,55,.24)}
.problems-secondary-btn{border:1px solid #30343b;color:#d8dbe0;background:#101216}
.problems-secondary-btn:hover{border-color:#ff4b38;transform:translateY(-2px)}
.problems-proof{display:flex;gap:28px;margin-top:42px;padding-top:22px;border-top:1px solid #24272d}
.problems-proof div{display:flex;flex-direction:column;gap:2px}.problems-proof strong{font:700 21px "Space Grotesk"}.problems-proof span{color:#737983;font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.problems-hero-console{border:1px solid #2c3037;border-radius:15px;background:#0d0f12;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 70px rgba(255,69,44,.07);overflow:hidden;transform:perspective(1100px) rotateY(-4deg);animation:problemConsoleFloat 5s ease-in-out infinite}
@keyframes problemConsoleFloat{0%,100%{transform:perspective(1100px) rotateY(-4deg) translateY(0)}50%{transform:perspective(1100px) rotateY(-4deg) translateY(-7px)}}
.console-top,.console-footer{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid #272a30;font:10px "Space Grotesk";letter-spacing:.08em;color:#737983}.console-top b{margin-left:auto;color:#69e59a;font-size:9px}.console-dots{display:flex;gap:5px}.console-dots i{width:7px;height:7px;border-radius:50%;background:#343840}.console-body{padding:22px 20px 18px;font:13px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e5e7eb}.console-line{color:#7f8791}.console-line span{color:#e6e8eb}.console-line:nth-child(2) span,.console-line:nth-child(3) span{color:#64d8ff}.console-line:nth-child(4) span{color:#ffd166}.console-line:nth-child(5) span{color:#caa7ff}.console-line:nth-child(6) span{color:#ff8b75}.muted-line span{color:#626973!important}.console-output{margin-top:20px;padding:10px 12px;border:1px solid rgba(105,229,154,.18);background:rgba(105,229,154,.045);border-radius:7px;color:#9099a4;font-size:11px}.console-output span{color:#69e59a}.console-footer{border-top:1px solid #272a30;border-bottom:0}.console-footer span:first-child{color:#64d8ff}.console-footer button{margin-left:auto;border:1px solid #3a3e45;background:#15181d;color:#f4f5f6;border-radius:6px;padding:7px 10px;font-size:10px;cursor:pointer}
.problems-bank{padding:95px 0 110px;background:#0a0b0e}
.problems-section-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:38px}.problems-section-intro h2,.problems-method h2,.problems-cta h2{font:700 clamp(40px,5vw,64px)/.95 "Space Grotesk",Inter,sans-serif;letter-spacing:-.05em;margin:18px 0 0}.problems-section-intro>p{color:#8f959e;line-height:1.75;max-width:520px;margin:0 0 3px}
.practice-track-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.track-tab{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:15px;border:1px solid #282c33;background:#0e1014;border-radius:11px;transition:.2s}.track-tab:hover{border-color:#474c55;transform:translateY(-2px)}.track-tab.active{border-color:#ff4b38;background:linear-gradient(145deg,rgba(255,75,56,.1),#0e1014);box-shadow:inset 0 0 0 1px rgba(255,75,56,.08)}.track-tab.active:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:linear-gradient(90deg,#ff4b38,#ffb914);border-radius:2px}.track-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid #333841;border-radius:9px;font:700 14px "Space Grotesk";flex:none}.sql-icon{color:#ff705e}.python-icon{color:#ffd166}.spark-icon{color:#69e59a}.java-icon{color:#b99cff}.track-tab span:nth-child(2){display:flex;flex-direction:column;min-width:0}.track-tab b{font:700 14px "Space Grotesk"}.track-tab small{color:#737a85;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-tab>strong{margin-left:auto;color:#aeb4bd;font:700 11px "Space Grotesk"}
.problem-bank-panel{border:1px solid #25292f;border-radius:15px;background:#0c0e12;overflow:hidden}.problem-bank-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:28px 28px 24px;border-bottom:1px solid #25292f}.problem-bank-head h2{font:700 32px "Space Grotesk";letter-spacing:-.03em;margin:9px 0 3px}.problem-bank-head p{color:#747b85;margin:0;font-size:12px}.workspace-link{display:inline-flex;align-items:center;gap:8px;color:#dfe2e6;border:1px solid #30343c;padding:10px 13px;border-radius:8px;font:600 11px "Space Grotesk";white-space:nowrap}.workspace-link:hover{border-color:#ff4b38;color:#fff}
.problem-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;padding:18px 28px;border-bottom:1px solid #20242a;background:#0f1115}.problem-search{display:flex;align-items:center;gap:10px;border:1px solid #2a2e35;background:#0a0c0f;border-radius:8px;padding:0 12px;color:#6f7680}.problem-search input{width:100%;border:0;outline:0;background:transparent;color:#f5f6f8;padding:11px 0;font-size:12px}.problem-search:focus-within{border-color:#555b65;box-shadow:0 0 0 3px rgba(255,75,56,.05)}.problem-filters{display:flex;gap:6px}.problem-filters .filter-btn,.topic-chip,.sort-button{border:1px solid #2a2e35;background:#0a0c0f;color:#9198a2;border-radius:7px;padding:9px 12px;font:600 11px "Space Grotesk";cursor:pointer;transition:.18s}.problem-filters .filter-btn:hover,.problem-filters .filter-btn.active,.topic-chip:hover,.topic-chip.active,.sort-button:hover{border-color:#ff4b38;color:#fff;background:#151116}.sort-button{white-space:nowrap}.problem-topic-strip{display:flex;gap:7px;overflow:auto;padding:13px 28px;border-bottom:1px solid #20242a;scrollbar-width:thin}.topic-chip{white-space:nowrap;padding:7px 10px;font-weight:500}.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#25292f}.problem-card-v2{min-width:0;min-height:250px;display:flex;flex-direction:column;padding:23px;background:#0c0e12;color:#f3f4f6;transition:background .2s,transform .2s;position:relative}.problem-card-v2:hover{background:#11141a;z-index:1}.pc2-top,.pc2-title-row,.pc2-bottom,.pc2-tags{display:flex;align-items:center;justify-content:space-between;gap:10px}.pc2-id{color:#ff6653;font:700 10px "Space Grotesk";letter-spacing:.08em}.pc2-difficulty{font:700 9px "Space Grotesk";letter-spacing:.09em;text-transform:uppercase;padding:5px 7px;border-radius:999px;border:1px solid}.pc2-difficulty.easy{color:#69e59a;border-color:rgba(105,229,154,.25);background:rgba(105,229,154,.05)}.pc2-difficulty.medium{color:#ffd166;border-color:rgba(255,209,102,.25);background:rgba(255,209,102,.05)}.pc2-difficulty.hard{color:#ff7562;border-color:rgba(255,117,98,.25);background:rgba(255,117,98,.05)}.pc2-title-row{align-items:flex-start;margin:18px 0 9px}.pc2-title-row h3{font:700 18px/1.2 "Space Grotesk";letter-spacing:-.025em;margin:0}.pc2-arrow{color:#616872;font-size:18px;transition:.2s}.problem-card-v2:hover .pc2-arrow{color:#ff5a46;transform:translate(2px,-2px)}.problem-card-v2 p{color:#858c96;font-size:12px;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pc2-tags{justify-content:flex-start;flex-wrap:wrap;margin-top:auto;padding-top:20px}.pc2-tags span{font-size:9px;color:#717984;border:1px solid #282d34;border-radius:999px;padding:5px 7px}.pc2-bottom{margin-top:16px;padding-top:13px;border-top:1px solid #22262d;color:#707782;font:10px "Space Grotesk";text-transform:uppercase;letter-spacing:.07em}.pc2-bottom span:last-child{color:#464c55}.problem-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:70px 20px;background:#0c0e12;color:#dfe2e6}.problem-empty span{color:#777e88;font-size:12px}.problem-pager-v2{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:#0c0e12;border-top:1px solid #25292f}.pager-btn{border:1px solid #30343b;background:#11141a;color:#dfe2e6;border-radius:7px;padding:9px 12px;cursor:pointer;font:600 11px "Space Grotesk"}.pager-btn:hover:not(:disabled){border-color:#ff4b38}.pager-btn:disabled{opacity:.35;cursor:not-allowed}.problem-pager-v2 span{color:#777e88;font-size:11px}.problem-pager-v2 b{color:#e7e9ec}
.problems-method{padding:105px 0;border-top:1px solid #24272d;background:#090a0d}.method-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}.method-steps{display:grid;gap:10px}.method-steps article{display:grid;grid-template-columns:45px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid #24272d}.method-steps article>span{color:#ff5a46;font:700 12px "Space Grotesk";padding-top:2px}.method-steps b{font:700 15px "Space Grotesk"}.method-steps p{color:#7f8690;font-size:12px;line-height:1.6;margin:5px 0 0}
.problems-cta{padding:90px 0;border-top:1px solid #24272d;background:radial-gradient(circle at 80% 50%,rgba(255,73,48,.1),transparent 32%),#08090b}.problems-cta .container{display:flex;align-items:end;justify-content:space-between;gap:30px}.problems-cta h2{margin-top:14px}
@media(max-width:1000px){.problems-hero-grid{grid-template-columns:1fr;gap:42px}.problems-hero-console{max-width:720px}.problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.problem-controls{grid-template-columns:1fr auto}.sort-button{grid-column:2}.problem-search{grid-column:1/-1}.method-grid{grid-template-columns:1fr;gap:45px}.problems-section-intro{gap:40px}}
@media(max-width:700px){.problems-page .container{width:calc(100% - 28px)}.problems-hero{padding:72px 0 60px}.problems-hero h1{font-size:clamp(50px,15vw,72px)}.problems-hero-copy>p{font-size:15px}.problems-proof{gap:16px;flex-wrap:wrap}.problems-proof div{min-width:95px}.problems-hero-console{transform:none;animation:none}.problems-section-intro{grid-template-columns:1fr;gap:18px}.problems-section-intro h2,.problems-method h2,.problems-cta h2{font-size:44px}.practice-track-tabs{grid-template-columns:1fr 1fr}.track-tab{padding:12px}.track-tab>strong{display:none}.problem-bank-head{align-items:flex-start;flex-direction:column;padding:22px 18px}.workspace-link{width:100%;justify-content:center}.problem-controls{grid-template-columns:1fr;padding:14px 18px}.problem-search,.sort-button{grid-column:auto}.problem-filters{overflow:auto;padding-bottom:2px}.problem-filters .filter-btn{white-space:nowrap}.sort-button{width:100%}.problem-topic-strip{padding:11px 18px}.problem-grid{grid-template-columns:1fr}.problem-card-v2{min-height:230px;padding:20px}.problems-bank{padding:70px 0 80px}.problems-method{padding:75px 0}.problems-cta{padding:70px 0}.problems-cta .container{align-items:flex-start;flex-direction:column}.problems-cta .problems-primary-btn{width:100%}}
@media(max-width:380px){.problems-page .container{width:calc(100% - 22px)}.problems-hero{padding-top:58px}.problems-hero-actions{flex-direction:column}.problems-primary-btn,.problems-secondary-btn{width:100%}.problems-proof{display:grid;grid-template-columns:1fr 1fr}.practice-track-tabs{gap:7px}.track-tab{min-height:68px}.track-icon{width:32px;height:32px}.track-tab b{font-size:12px}.track-tab small{font-size:9px}.problems-section-intro h2,.problems-method h2,.problems-cta h2{font-size:38px}}

/* =========================================================
   PROBLEMS SCREEN v2 — Advanced Practice Lab Hero
   ========================================================= */
.problems-hero-v2{position:relative;isolation:isolate;padding:72px 0 62px;min-height:690px;overflow:hidden;background:
  radial-gradient(circle at 78% 25%,rgba(255,72,49,.16),transparent 26%),
  radial-gradient(circle at 56% 65%,rgba(86,72,255,.10),transparent 24%),
  radial-gradient(circle at 16% 80%,rgba(255,181,24,.07),transparent 28%),#07090c}
.problems-hero-v2:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(135deg,transparent 58%,rgba(255,74,55,.06) 58.2%,transparent 59%),
  linear-gradient(315deg,transparent 72%,rgba(65,111,255,.055) 72.2%,transparent 73%)}
.problems-hero-v2 .problems-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);gap:56px;align-items:center}
.problems-hero-kicker-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.problems-hero-status{display:none;border:1px solid #1f3345;background:rgba(11,20,30,.72);border-radius:999px;padding:9px 13px;color:#aebbd0;font:600 10px "Space Grotesk";letter-spacing:.04em}.problems-hero-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#35d98d;box-shadow:0 0 12px rgba(53,217,141,.7);margin-right:7px}
.problems-hero-v2 h1{font-size:clamp(66px,7vw,104px);line-height:.87;letter-spacing:-.075em;margin:30px 0 28px;position:relative}.hero-caret{display:inline-block;font-size:.82em;color:#ff5a46;margin-left:6px;animation:heroCaret 1s steps(1) infinite}@keyframes heroCaret{50%{opacity:0}}
.problems-hero-lead{max-width:620px!important;font-size:17px!important;line-height:1.72!important;color:#aab5c7!important}
.problems-feature-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}.problems-feature{display:flex;align-items:center;gap:10px;min-width:0}.feature-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;font-weight:700;border:1px solid #253044;background:#0d1420}.feature-blue{color:#58a8ff;box-shadow:inset 0 0 24px rgba(88,168,255,.08)}.feature-purple{color:#ae7cff;background:#171127}.feature-yellow{color:#ffc44d;background:#1c1609}.feature-green{color:#43e4a0;background:#0c1c18}.problems-feature b,.problems-feature small{display:block}.problems-feature b{font:600 11px/1.2 "Space Grotesk";color:#dbe1eb}.problems-feature small{font-size:10px;color:#778397;margin-top:3px}
.problems-primary-btn-v2{padding:15px 19px;border-radius:10px;min-height:48px}.problems-secondary-btn-v2{padding:15px 19px;border-radius:10px;min-height:48px;background:rgba(12,16,24,.75)}.btn-play,.btn-book{font-size:14px}.problems-proof-v2{gap:0;padding:19px 0 0;margin-top:34px;justify-content:flex-start}.problems-proof-v2>div{display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;column-gap:8px;padding-right:26px;margin-right:26px;border-right:1px solid #202632}.problems-proof-v2>div:last-child{border-right:0}.problems-proof-v2 .proof-icon{grid-row:1/3;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#251813;color:#ff725e}.problems-proof-v2 .proof-icon.purple{background:#17112e;color:#a67cff}.problems-proof-v2 .proof-icon.blue{background:#0e1b2e;color:#55a8ff}.problems-proof-v2 .proof-icon.green{background:#0c2019;color:#46dba0}.problems-proof-v2 strong{font-size:18px;line-height:1}.problems-proof-v2 span:last-child{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#737e90}
.problems-hero-visual{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}.hero-workspace{width:min(760px,100%);border:1px solid #243249;border-radius:18px;background:linear-gradient(160deg,#0d131c,#070a0f 75%);box-shadow:0 35px 90px rgba(0,0,0,.52),0 0 80px rgba(61,91,255,.08),0 0 55px rgba(255,67,48,.10);overflow:hidden;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);animation:workspaceFloat 6s ease-in-out infinite;position:relative}.hero-workspace:before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(120deg,rgba(255,83,58,.55),rgba(101,79,255,.35),rgba(53,216,141,.18));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes workspaceFloat{0%,100%{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-8px)}}
.workspace-topbar{height:58px;padding:0 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #202a37;background:rgba(8,12,18,.84)}.workspace-brand{font:600 12px "Space Grotesk";color:#aab5c6;white-space:nowrap}.workspace-brand b{background:#ff684d;color:#fff;padding:7px 8px;border-radius:8px;margin-right:7px;font-size:10px}.workspace-brand em{font-style:normal;color:#566172;margin:0 5px}.workspace-ready{margin-left:auto;color:#53e09a;font:700 10px "Space Grotesk"}.workspace-ready i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#35d98d;box-shadow:0 0 12px #35d98d;margin-right:5px}.workspace-db,.workspace-run{border:1px solid #2b3646;background:#111821;color:#dce4ef;border-radius:8px;padding:9px 12px;font:600 11px "Space Grotesk"}.workspace-db span{margin-left:10px;color:#748095}.workspace-run{background:linear-gradient(100deg,#2d83ff,#6f65ff);border-color:#558fff;color:white;box-shadow:0 8px 24px rgba(66,118,255,.2)}.workspace-editor{padding:28px 26px 22px}.editor-lines{font:15px/1.95 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.editor-lines>div{display:grid;grid-template-columns:30px 1fr;gap:8px}.editor-lines small{color:#536071}.code-comment{color:#667386}.code-blue{color:#51b8ff}.code-purple{color:#b58bff}.code-yellow{color:#ffc85a}.code-red{color:#ff725e}.workspace-result{margin-top:23px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(61,222,150,.2);background:linear-gradient(90deg,rgba(31,151,103,.12),rgba(20,65,50,.08));border-radius:10px}.result-check{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#28d48c;color:#07110d;font-weight:900}.workspace-result b{display:block;color:#36d99a;font:700 12px "Space Grotesk"}.workspace-result small{display:block;color:#6f8990;font-size:10px;margin-top:3px}.workspace-result button{margin-left:auto;border:1px solid #2b3845;background:#121922;color:#dfe7f1;border-radius:8px;padding:9px 11px;font:600 10px "Space Grotesk"}.workspace-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid #202a37;background:#0b1016}.workspace-tabs{display:flex;gap:7px}.workspace-tabs button{border:0;background:#10161f;color:#8995a7;border-radius:8px;padding:10px 16px;font:600 11px "Space Grotesk"}.workspace-tabs button.active{color:#ff8a62;background:rgba(255,75,55,.1);box-shadow:inset 0 -2px #ff5a46}.workspace-reset{border:1px solid #2b3646;background:#111821;color:#aab5c6;border-radius:8px;padding:9px 11px;font:600 10px "Space Grotesk"}
.hero-annotation{position:absolute;color:#8795aa;font:italic 16px/1.25 "Caveat",cursive;pointer-events:none}.annotation-top{top:8px;left:2%;transform:rotate(-4deg)}.annotation-top span{display:block;font-size:28px;color:#ff5a46;margin-left:150px}.annotation-side{right:-2%;bottom:18%;text-align:left;transform:rotate(-3deg)}.annotation-side span{font-size:26px;color:#ff5a46}.hero-mini-card{position:absolute;right:-3%;bottom:2%;display:grid;grid-template-columns:28px 1fr;gap:3px 8px;padding:13px 15px;border:1px solid #202a38;border-radius:12px;background:rgba(9,14,21,.88);box-shadow:0 15px 40px rgba(0,0,0,.3);font-family:"Space Grotesk"}.hero-mini-card span{grid-row:1/4;color:#6ca7ff}.hero-mini-card b{font-size:11px;color:#dbe3ef}.hero-mini-card small{font-size:9px;color:#6f7d90}.problems-hero-v2 .problems-eyebrow{color:#a0aabd}
@media(max-width:1100px){.problems-hero-v2 .problems-hero-grid{grid-template-columns:1fr;gap:45px}.problems-hero-v2 .problems-hero-copy{max-width:820px}.problems-hero-v2 .problems-hero-status{display:block}.problems-hero-visual{min-height:460px}.hero-mini-card{right:0}.annotation-side{right:0}}
@media(max-width:700px){.problems-hero-v2{padding:52px 0 58px;min-height:auto}.problems-hero-v2 .problems-hero-grid{gap:36px}.problems-hero-kicker-row{align-items:flex-start}.problems-hero-status{font-size:8px;padding:8px 10px}.problems-hero-v2 h1{font-size:clamp(52px,15vw,76px);margin:23px 0 22px}.hero-caret{display:none}.problems-hero-lead{font-size:15px!important}.problems-feature-row{grid-template-columns:1fr 1fr;gap:13px 9px}.problems-feature{padding:4px 0}.problems-proof-v2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.problems-proof-v2>div{margin:0;padding:0;border-right:0}.problems-hero-actions{display:grid;grid-template-columns:1fr 1fr}.problems-primary-btn-v2,.problems-secondary-btn-v2{width:100%;padding:13px 12px}.problems-hero-visual{min-height:360px;display:block}.hero-workspace{width:100%;transform:none;animation:none;border-radius:14px}.workspace-topbar{height:52px;padding:0 10px;gap:7px}.workspace-brand{font-size:9px;overflow:hidden;text-overflow:ellipsis}.workspace-brand b{padding:5px 6px;font-size:8px}.workspace-ready{display:none}.workspace-db{display:none}.workspace-run{padding:8px 10px;font-size:9px;margin-left:auto}.workspace-editor{padding:18px 13px 15px}.editor-lines{font-size:10px}.editor-lines>div{grid-template-columns:22px 1fr}.workspace-result{padding:10px}.workspace-result button{display:none}.workspace-bottom{padding:9px}.workspace-tabs button{padding:8px 9px;font-size:9px}.workspace-reset{display:none}.hero-annotation,.hero-mini-card{display:none}}
@media(max-width:380px){.problems-hero-v2{padding-top:45px}.problems-hero-v2 .problems-hero-grid{gap:28px}.problems-hero-v2 h1{font-size:45px}.problems-feature-row{grid-template-columns:1fr}.problems-hero-actions{grid-template-columns:1fr}.problems-proof-v2{grid-template-columns:1fr 1fr}.workspace-editor{padding:14px 10px}.editor-lines{font-size:9px}.workspace-result b{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-caret,.hero-workspace{animation:none!important}}

/* =========================================================
   PROBLEMS SCREEN v3 — Practice Dashboard
   ========================================================= */
.problems-hero-v3{padding:82px 0 58px;min-height:610px;position:relative;overflow:hidden;background:
 radial-gradient(circle at 82% 36%,rgba(255,76,45,.13),transparent 25%),
 radial-gradient(circle at 42% 85%,rgba(73,100,255,.08),transparent 25%),#07090d}
.problems-hero-v3:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 92%)}
.problems-v3-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:54px;align-items:center;position:relative;z-index:1}
.problems-v3-copy{min-width:0}.problems-v3-kicker{display:flex;align-items:center;gap:10px;color:#a4adbb;font:700 11px "Space Grotesk";letter-spacing:.16em}.problems-v3-kicker span{width:28px;height:1px;background:#ff5a46;display:inline-block}
.problems-v3-copy h1{font:750 clamp(58px,6.5vw,92px)/.94 "Space Grotesk";letter-spacing:-.07em;margin:28px 0 26px;color:#f5f6f7}.problems-v3-copy h1 em{font-style:normal;background:linear-gradient(100deg,#ff4b38,#ffb62b);-webkit-background-clip:text;background-clip:text;color:transparent}.problems-v3-copy>p{max-width:660px;color:#aab6c7;font-size:16px;line-height:1.7;margin:0}
.problems-v3-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 24px}.problems-v3-features>div{display:flex;align-items:center;gap:9px;min-width:0}.problems-v3-features i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:#101927;border:1px solid #27344a;color:#61a8ff;flex:none}.problems-v3-features>div:nth-child(2) i{color:#a98cff;background:#17122a}.problems-v3-features>div:nth-child(3) i{color:#ffd05d;background:#211a0c}.problems-v3-features>div:nth-child(4) i{color:#43e09d;background:#0d2019}.problems-v3-features b,.problems-v3-features small{display:block}.problems-v3-features b{font:600 11px/1.2 "Space Grotesk";color:#dce3ed}.problems-v3-features small{color:#738094;font-size:10px;margin-top:3px}
.problems-v3-primary{padding:14px 20px;border-radius:10px;box-shadow:0 12px 32px rgba(255,83,43,.2)}.problems-v3-secondary{padding:14px 20px;border-radius:10px}.problems-v3-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid #202a38;border-radius:14px;background:rgba(9,13,20,.62);overflow:hidden}.problems-v3-stats>div{padding:15px 14px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:2px 9px;border-right:1px solid #202a38}.problems-v3-stats>div:last-child{border-right:0}.problems-v3-stats i{grid-row:1/3;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#20130f;color:#ff765c;font-style:normal}.problems-v3-stats>div:nth-child(2) i{background:#101e1a;color:#69e59a}.problems-v3-stats>div:nth-child(3) i{background:#20190b;color:#ffcb57}.problems-v3-stats>div:nth-child(4) i{background:#15142b;color:#9d8cff}.problems-v3-stats strong{font:700 18px/1 "Space Grotesk"}.problems-v3-stats small{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#718096}
.problems-v3-workspace-wrap{position:relative;min-width:0}.problems-v3-workspace{border:1px solid #29364a;border-radius:17px;background:#080d14;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 55px rgba(70,103,255,.08),0 0 45px rgba(255,70,48,.09);overflow:hidden;animation:v3Float 7s ease-in-out infinite}.problems-v3-workspace:before{content:"";display:block;height:2px;background:linear-gradient(90deg,#ff4d3a,#7169ff,#4fe09c)}@keyframes v3Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.v3-ws-head{height:58px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 14px;border-bottom:1px solid #202b39;background:#0b1119}.v3-brand{font:600 11px "Space Grotesk";color:#aeb8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v3-brand b{background:#ff634b;color:#fff;border-radius:7px;padding:7px 8px;margin-right:7px;font-size:9px}.v3-brand span{color:#596576;margin:0 4px}.v3-ws-actions{display:flex;gap:7px;flex:none}.v3-ws-actions button{border:1px solid #2b3848;background:#111923;color:#dce5ef;border-radius:8px;padding:9px 11px;font:600 10px "Space Grotesk"}.v3-ws-actions .v3-run{background:linear-gradient(100deg,#ff5a3f,#ffb72c);color:#12100b;border-color:#ff8450;box-shadow:0 7px 20px rgba(255,87,48,.18)}
.v3-ws-code{padding:23px 25px 17px;font:13px/1.95 ui-monospace,SFMono-Regular,Menlo,monospace}.v3-ws-code>div{display:grid;grid-template-columns:28px 1fr;gap:7px}.v3-ws-code small{color:#536274}.v3-ws-status{margin-top:17px;padding:13px 14px;border:1px solid rgba(62,222,150,.18);border-radius:10px;background:rgba(24,100,71,.12);display:flex;align-items:center;gap:10px}.v3-ws-status>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#39d99a;color:#07120d;font-weight:900}.v3-ws-status b{display:block;color:#3bdda0;font:700 11px "Space Grotesk"}.v3-ws-status small{display:block;color:#6f8992;font-size:9px;margin-top:3px}.v3-result-tabs{display:flex;align-items:center;gap:5px;padding:9px 12px;border-top:1px solid #202b39;border-bottom:1px solid #202b39}.v3-result-tabs button{border:0;background:transparent;color:#738095;padding:7px 10px;font:600 10px "Space Grotesk"}.v3-result-tabs button.active{color:#f0f3f7;background:#111b27;border-radius:6px}.v3-result-tabs em{margin-left:auto;color:#3edb9b;font:700 9px "Space Grotesk";font-style:normal}.v3-result-table{padding:0 12px 12px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.v3-result-table>div{display:grid;grid-template-columns:1fr 1fr;padding:8px 9px;border-bottom:1px solid #1d2631;color:#a6b1bf}.v3-result-table>div:first-child{color:#e3e8ee;background:#0f1721}.v3-language-tabs{display:flex;gap:7px;padding:10px 12px;border-top:1px solid #202b39;background:#0a0f15}.v3-language-tabs button{border:0;background:#101722;color:#8c98a9;border-radius:8px;padding:9px 13px;font:600 10px "Space Grotesk"}.v3-language-tabs button.active{color:#ff795f;background:rgba(255,78,56,.1);box-shadow:inset 0 -2px #ff5a46}
.problems-v3-note{position:absolute;color:#8592a7;font:italic 16px/1.2 "Caveat",cursive;pointer-events:none}.problems-v3-note-top{top:-30px;left:42%;transform:rotate(-4deg)}.problems-v3-note-top span{color:#ff5b45;font-size:26px}.problems-v3-note-side{right:-5%;bottom:4%;transform:rotate(-4deg)}.problems-v3-note-side span{color:#ff8a68}
.problems-bank-v3{padding-top:76px}.problems-v3-intro{margin-bottom:30px}.problems-v3-bank-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}.problems-v3-sidebar{border:1px solid #202832;border-radius:12px;background:#0b0f15;overflow:hidden;position:sticky;top:90px}.v3-side-section{padding:16px 14px;border-bottom:1px solid #202832}.v3-side-section:last-child{border-bottom:0}.v3-side-title{display:flex;justify-content:space-between;color:#788598;font:700 9px "Space Grotesk";letter-spacing:.12em;margin-bottom:10px}.v3-side-title span{color:#a9b2bf}.v3-side-track{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;padding:9px 8px;border-radius:7px;color:#8f9baa;font-size:11px}.v3-side-track span{color:#657286}.v3-side-track em{font-style:normal;font-size:9px;color:#596575}.v3-side-track.active{background:rgba(255,74,54,.08);color:#fff}.v3-side-track.active span{color:#ff6a53}.v3-side-track.active em{color:#b6c0ce}.v3-side-filters{display:grid;gap:5px}.v3-side-filters .filter-btn{display:flex;align-items:center;gap:8px;border:0!important;background:transparent!important;text-align:left;padding:7px 5px!important;color:#8995a5!important}.v3-side-filters .filter-btn:before{content:"";width:12px;height:12px;border:1px solid #394454;border-radius:3px}.v3-side-filters .filter-btn.active{color:#fff!important}.v3-side-filters .filter-btn.active:before{border-color:#ff5b46;box-shadow:inset 0 0 0 3px #0b0f15;background:#ff5b46}.v3-topic-search{display:flex;align-items:center;gap:7px;border:1px solid #26303d;border-radius:7px;padding:0 8px;color:#667386}.v3-topic-search input{min-width:0;width:100%;background:transparent;border:0;outline:0;color:#dce3eb;padding:8px 0;font-size:10px}.problem-topic-list{display:grid;gap:2px;margin-top:7px;max-height:330px;overflow:auto}.problem-topic-list .topic-chip{border:0!important;background:transparent!important;color:#7e8999!important;text-align:left;padding:6px 4px!important;font-size:10px!important}.problem-topic-list .topic-chip.active,.problem-topic-list .topic-chip:hover{color:#fff!important}.problem-topic-list .topic-chip:before{content:"□";margin-right:7px;color:#566477}.problem-topic-list .topic-chip.active:before{content:"■";color:#ff5a46}
.v3-bank-main{min-width:0}.v3-bank-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 130px 135px;gap:9px;margin-bottom:12px}.v3-bank-toolbar .problem-search{min-width:0}.v3-select{border:1px solid #29323e;background:#0b0f15;color:#aab4c2;border-radius:8px;padding:0 12px;font:600 10px "Space Grotesk";text-align:left}.v3-select span{float:right;color:#677487}.v3-list-panel{border-radius:12px}.v3-list-head{display:flex;align-items:end;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #202832}.v3-list-head h2{font:700 26px "Space Grotesk";margin:8px 0 2px}.v3-list-head p{margin:0;color:#6f7b8b;font-size:10px}.v3-problem-list{display:grid;grid-template-columns:1fr;gap:1px;background:#202832}.v3-problem-row{display:grid;grid-template-columns:28px minmax(0,1fr) 150px;gap:12px;align-items:center;min-height:104px;padding:17px 18px;background:#0b0f15}.v3-problem-row:hover{background:#10161f;transform:none}.v3-row-index{color:#667285;font:600 10px ui-monospace,monospace}.v3-row-main{min-width:0}.v3-row-title{display:flex;align-items:center;gap:9px;min-width:0}.v3-row-title h3{font:700 14px/1.25 "Space Grotesk";margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v3-row-title .pc2-difficulty{flex:none}.v3-row-main p{margin:7px 0 8px;color:#7f8a99;font-size:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.v3-row-main .pc2-tags{margin:0;padding:0;gap:5px}.v3-row-main .pc2-tags span{padding:4px 6px;font-size:8px}.v3-row-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;justify-items:end;color:#687588;font-size:9px}.v3-row-stats b{grid-column:1/-1;border:1px solid #2a3442;background:#101722;color:#dce3eb;border-radius:6px;padding:7px 9px;font:600 9px "Space Grotesk"}.v3-row-stats b:hover{border-color:#ff5a46}.v3-bookmark{font-size:15px;color:#647083}
@media(max-width:1050px){.problems-v3-hero-grid{grid-template-columns:1fr;gap:42px}.problems-v3-copy{max-width:850px}.problems-v3-workspace-wrap{max-width:820px}.problems-v3-bank-layout{grid-template-columns:190px minmax(0,1fr)}.v3-problem-row{grid-template-columns:24px minmax(0,1fr) 115px}}
@media(max-width:760px){.problems-hero-v3{padding:58px 0 48px}.problems-v3-copy h1{font-size:clamp(52px,14vw,76px)}.problems-v3-features{grid-template-columns:1fr 1fr}.problems-v3-stats{grid-template-columns:1fr 1fr}.problems-v3-stats>div:nth-child(2){border-right:0}.problems-v3-stats>div{border-bottom:1px solid #202a38}.problems-v3-stats>div:nth-child(3),.problems-v3-stats>div:nth-child(4){border-bottom:0}.problems-v3-workspace{border-radius:13px}.problems-v3-note{display:none}.v3-ws-head{height:52px}.v3-brand{font-size:9px}.v3-ws-actions button:first-child{display:none}.v3-ws-code{padding:16px 13px;font-size:10px}.v3-ws-code>div{grid-template-columns:22px 1fr}.v3-result-table{font-size:9px}.problems-v3-bank-layout{grid-template-columns:1fr}.problems-v3-sidebar{position:static}.v3-side-section:first-child{display:flex;gap:6px;align-items:center;overflow:auto}.v3-side-section:first-child .v3-side-title{display:none}.v3-side-track{min-width:120px}.v3-side-section:nth-child(2){padding:10px 12px}.v3-side-filters{display:flex;overflow:auto}.v3-side-filters .filter-btn{white-space:nowrap}.v3-side-section:nth-child(3){display:block}.problem-topic-list{display:flex;overflow:auto;max-height:none}.problem-topic-list .topic-chip{white-space:nowrap}.v3-bank-toolbar{grid-template-columns:1fr 1fr}.v3-bank-toolbar .problem-search{grid-column:1/-1}.v3-select{min-height:40px}.v3-list-head{padding:17px 15px;align-items:flex-start;flex-direction:column;gap:10px}.v3-list-head .workspace-link{width:100%;justify-content:center}.v3-problem-row{grid-template-columns:20px minmax(0,1fr);padding:16px 14px}.v3-row-stats{grid-column:2;display:flex;justify-content:flex-start;gap:12px;align-items:center}.v3-row-stats b{margin-left:auto}.v3-row-title h3{white-space:normal}.v3-row-main p{-webkit-line-clamp:2}}
@media(max-width:430px){.problems-v3-copy h1{font-size:48px}.problems-v3-features{gap:12px 7px}.problems-v3-features b{font-size:10px}.problems-v3-features small{font-size:9px}.problems-v3-primary,.problems-v3-secondary{width:100%}.problems-v3-stats>div{padding:12px 10px}.problems-v3-stats strong{font-size:16px}.v3-ws-code{font-size:9px}.v3-ws-status b{font-size:10px}.v3-language-tabs button{padding:8px 9px}.v3-bank-toolbar{grid-template-columns:1fr}.v3-bank-toolbar .problem-search{grid-column:auto}.v3-select{width:100%}}
/* PROJECTS PAGE v1.0 */
.dex-projects-page{background:#08090d;color:#f5f1e8;overflow:hidden}.dex-project-hero{position:relative;min-height:720px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);isolation:isolate}.dex-project-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000 0%,transparent 95%);z-index:-2}.dex-project-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;z-index:-1}.glow-a{width:430px;height:430px;background:#ff6a00;right:8%;top:8%}.glow-b{width:320px;height:320px;background:#663cff;left:15%;bottom:-15%}.project-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:110px 24px 90px}.project-kicker,.section-heading>span,.library-head>div>span,.portfolio-panel>div>span{font:600 12px/1 DM Mono,monospace;letter-spacing:.18em;color:#ffb21c}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff8a00;box-shadow:0 0 16px #ff8a00;margin-right:8px}.project-hero-copy h1{font:700 clamp(56px,7vw,98px)/.9 Space Grotesk,sans-serif;letter-spacing:-.06em;margin:22px 0}.project-hero-copy h1 span,.section-heading em,.portfolio-panel em{font-style:normal;background:linear-gradient(90deg,#ff7a00,#ffd43b);-webkit-background-clip:text;background-clip:text;color:transparent}.project-hero-copy p{max-width:620px;color:#a9a8ad;font-size:18px;line-height:1.7}.project-hero-actions{display:flex;gap:12px;margin:30px 0}.project-btn{padding:14px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.12);text-decoration:none;font-weight:700}.project-btn.primary{background:linear-gradient(135deg,#ff7a00,#ffb51b);color:#17120b;box-shadow:0 12px 35px rgba(255,122,0,.2)}.project-btn.ghost{color:#fff;background:rgba(255,255,255,.03)}.project-proof{display:flex;gap:26px;flex-wrap:wrap;color:#8d8d95;font:12px DM Mono,monospace}.project-proof b{display:block;color:#fff;font:700 22px Space Grotesk;margin-bottom:3px}.architecture-card{background:linear-gradient(145deg,rgba(26,28,34,.95),rgba(10,11,15,.98));border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);transform:perspective(1000px) rotateY(-5deg);animation:projectFloat 6s ease-in-out infinite}.arch-top{display:flex;justify-content:space-between;color:#7f8189;font:11px DM Mono,monospace}.arch-status{color:#7cffb2}.arch-flow{display:flex;align-items:center;gap:10px;margin:50px 0}.arch-node{width:112px;min-height:100px;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;justify-content:space-between}.arch-node b{color:#ff9d18;font:11px DM Mono}.arch-node span{font-weight:700}.arch-node small{color:#777b84;font:10px DM Mono}.arch-line{height:1px;flex:1;background:linear-gradient(90deg,#ff8a00,#7b5cff);position:relative}.arch-line:after{content:'›';position:absolute;right:-2px;top:-10px;color:#ffad2e}.arch-terminal{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:14px;border-radius:12px;background:#07080b;border:1px solid rgba(255,255,255,.08);font:11px DM Mono;color:#8b8e98}.arch-terminal strong{color:#77ffa9}.arch-terminal code{grid-column:1/-1;color:#d6d7dc}.term-dot{width:7px;height:7px;background:#ff8b00;border-radius:50%;align-self:center}.project-workflow,.project-library,.project-portfolio{padding:110px 0}.section-heading{max-width:760px;margin-bottom:45px}.section-heading h2,.library-head h2,.portfolio-panel h2{font:700 clamp(38px,5vw,64px)/1 Space Grotesk;margin:14px 0;letter-spacing:-.045em}.section-heading p{color:#8f9098;line-height:1.7;font-size:17px}.workflow-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}.workflow-step{padding:26px;border-right:1px solid rgba(255,255,255,.08);min-height:150px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}.workflow-step:last-child{border-right:0}.workflow-step b{font:12px DM Mono;color:#ff9e18}.workflow-step span{display:block;font:700 20px Space Grotesk;margin:30px 0 8px}.workflow-step small{color:#777b85;line-height:1.5}.library-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.project-filters{display:flex;gap:8px;flex-wrap:wrap}.project-filters button{border:1px solid rgba(255,255,255,.1);background:#101116;color:#aaa;padding:9px 14px;border-radius:999px;cursor:pointer}.project-filters button.active,.project-filters button:hover{background:#ff8a00;color:#17120b;border-color:#ff8a00}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,#121319,#0c0d11);border-radius:20px;padding:24px;transition:.25s transform,.25s border-color,.25s box-shadow}.project-card:hover{transform:translateY(-6px);border-color:rgba(255,145,20,.55);box-shadow:0 20px 55px rgba(0,0,0,.35)}.project-card-top{display:flex;justify-content:space-between;gap:12px;font:10px DM Mono;color:#777b85;letter-spacing:.08em}.difficulty{padding:5px 8px;border-radius:999px;letter-spacing:0}.difficulty.beginner{color:#71e6a2;background:rgba(113,230,162,.1)}.difficulty.intermediate{color:#ffc85a;background:rgba(255,200,90,.1)}.difficulty.advanced{color:#ff7d8d;background:rgba(255,125,141,.1)}.project-card h3{font:700 26px Space Grotesk;margin:25px 0 10px}.project-card>p{color:#92939b;line-height:1.6;min-height:78px}.project-pipeline{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:20px 0}.project-pipeline span{font:10px DM Mono;color:#c4c5cb;background:#171920;border:1px solid rgba(255,255,255,.07);padding:6px 7px;border-radius:6px}.project-pipeline span:not(:last-child):after{content:' →';color:#ff9216}.project-meta{display:flex;gap:15px;color:#737681;font:10px DM Mono;border-top:1px solid rgba(255,255,255,.07);padding-top:15px}.stack-list{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}.stack-list span{font:10px DM Mono;color:#f1f1f3;background:#1b1d24;padding:5px 7px;border-radius:5px}.project-open{width:100%;margin-top:8px;border:0;background:transparent;color:#ffab24;text-align:left;font-weight:700;padding:10px 0;cursor:pointer}.project-open span{float:right;font-size:20px}.portfolio-panel{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:55px;background:radial-gradient(circle at 100% 0,rgba(255,130,0,.12),transparent 45%),#0d0e13}.portfolio-panel p{color:#8f9098;line-height:1.7;max-width:560px}.portfolio-stack{display:grid;gap:10px}.portfolio-stack div{padding:18px;border:1px solid rgba(255,255,255,.08);background:#111218;border-radius:12px}.portfolio-stack b{display:block;font:11px DM Mono;color:#ff9e18}.portfolio-stack span{display:block;color:#b2b3ba;margin-top:6px}@keyframes projectFloat{0%,100%{transform:perspective(1000px) rotateY(-5deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-5deg) translateY(-9px)}}
@media(max-width:1000px){.project-hero-inner{grid-template-columns:1fr;gap:45px}.project-hero-copy{text-align:center}.project-hero-copy p{margin-inline:auto}.project-hero-actions,.project-proof{justify-content:center}.architecture-card{max-width:760px;margin:auto}.workflow-grid{grid-template-columns:repeat(3,1fr)}.workflow-step:nth-child(3){border-right:0}.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.dex-project-hero{min-height:auto}.project-hero-inner{padding:75px 18px 65px}.project-hero-copy h1{font-size:clamp(48px,15vw,70px)}.project-hero-copy p{font-size:15px}.project-hero-actions{flex-direction:column}.project-btn{text-align:center}.project-proof{gap:18px}.architecture-card{padding:15px;overflow:auto}.arch-flow{min-width:570px;margin:35px 0}.arch-terminal{font-size:9px}.project-workflow,.project-library,.project-portfolio{padding:75px 0}.workflow-grid{grid-template-columns:1fr}.workflow-step{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.workflow-step:last-child{border-bottom:0}.library-head{display:block}.project-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;margin-top:20px}.project-filters button{white-space:nowrap}.project-grid{grid-template-columns:1fr}.project-card>p{min-height:0}.portfolio-panel{grid-template-columns:1fr;padding:28px}.project-card{padding:20px}}@media(prefers-reduced-motion:reduce){.architecture-card{animation:none}}
/* =========================================================
   EDITORS / WORKSPACE v1.0
   ========================================================= */
.workspace-page{background:#07090d;color:#f4f6f8;overflow:hidden}.workspace-hero{position:relative;overflow:hidden;padding:88px 0 70px;background:radial-gradient(circle at 78% 38%,rgba(255,86,50,.14),transparent 28%),radial-gradient(circle at 25% 80%,rgba(92,79,255,.08),transparent 26%),#07090d}.workspace-hero:before{content:"";position:absolute;inset:0;opacity:.3;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,#000,transparent 94%)}.workspace-hero-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:60px;align-items:center;position:relative;z-index:1}.workspace-kicker{display:flex;align-items:center;gap:10px;color:#8591a4;font:700 10px/1 "Space Grotesk";letter-spacing:.18em}.workspace-kicker>span{width:28px;height:1px;background:#ff624a}.workspace-kicker b{color:#55e3a0;background:rgba(64,216,150,.09);border:1px solid rgba(64,216,150,.2);padding:5px 7px;border-radius:999px;font-size:8px;letter-spacing:.08em}.workspace-hero h1{font:750 clamp(56px,6.7vw,92px)/.94 "Space Grotesk";letter-spacing:-.07em;margin:28px 0;color:#f5f6f7}.workspace-hero h1 em{font-style:normal;background:linear-gradient(100deg,#ff4e39,#ffba2c);-webkit-background-clip:text;background-clip:text;color:transparent}.workspace-hero p{max-width:620px;color:#a7b2c2;font-size:16px;line-height:1.75}.workspace-hero-actions{display:flex;gap:10px;margin:28px 0}.workspace-hero-actions .btn{border-radius:10px}.workspace-metrics{display:grid;grid-template-columns:repeat(3,1fr);max-width:560px;border:1px solid #202a37;border-radius:13px;overflow:hidden;background:rgba(10,14,21,.7)}.workspace-metrics div{padding:13px 15px;border-right:1px solid #202a37}.workspace-metrics div:last-child{border-right:0}.workspace-metrics strong,.workspace-metrics small{display:block}.workspace-metrics strong{font:700 15px "Space Grotesk"}.workspace-metrics small{margin-top:3px;color:#69778a;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.workspace-hero-visual{min-height:400px;display:grid;place-items:center;position:relative}.workspace-orbit{position:absolute;border:1px solid rgba(255,99,70,.14);border-radius:50%;transform:rotate(-18deg)}.orbit-a{width:430px;height:210px}.orbit-b{width:510px;height:250px;border-color:rgba(110,96,255,.12);transform:rotate(24deg)}.workspace-mini-editor{position:relative;width:min(560px,100%);border:1px solid #293548;border-radius:17px;background:#090e15;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(255,80,55,.08);overflow:hidden;transform:perspective(1000px) rotateY(-5deg);animation:workspaceFloat 7s ease-in-out infinite}.mini-top{height:47px;padding:0 13px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #202a37;color:#aeb8c6;font:600 10px "Space Grotesk"}.mini-top span:first-child{background:#ff624a;color:#fff;border-radius:6px;padding:6px 7px;margin-right:auto}.mini-top span:nth-child(2){color:#788699;margin-right:7px}.mini-top i{width:7px;height:7px;border-radius:50%;background:#293445}.mini-code{padding:25px 24px 20px;font:12px/1.9 ui-monospace,monospace;display:grid;grid-template-columns:25px 1fr;gap:0 8px}.mini-code span{color:#435165}.mini-code code{color:#c4cedb}.mini-code b{color:#ff795e}.mini-result{margin:0 13px 13px;padding:12px;border:1px solid rgba(67,221,157,.18);background:rgba(35,120,84,.1);border-radius:9px;color:#61dfa4;font:600 10px "Space Grotesk"}.mini-result span{margin-right:7px}.mini-result b{float:right;color:#819493;font-weight:500}@keyframes workspaceFloat{0%,100%{transform:perspective(1000px) rotateY(-5deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-5deg) translateY(-7px)}}.workspace-float-tag{position:absolute;padding:8px 10px;border:1px solid #273344;background:#0d141d;border-radius:8px;color:#68778b;font:8px "Space Grotesk";box-shadow:0 10px 25px rgba(0,0,0,.3);z-index:2}.workspace-float-tag b{display:block;color:#e8edf4;font-size:10px;margin-top:3px}.tag-one{top:15%;left:2%;transform:rotate(-5deg)}.tag-two{bottom:16%;right:0;transform:rotate(4deg)}
.workspace-shell{padding:80px 0 100px}.workspace-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}.workspace-head h2,.workspace-section-heading h2,.workspace-language-card h2,.workspace-final-card h2{font:700 clamp(36px,5vw,60px)/1 "Space Grotesk";letter-spacing:-.045em;margin:12px 0}.workspace-head p,.workspace-section-heading p,.workspace-language-card p{color:#8f9aaa;line-height:1.7;max-width:700px}.workspace-head-status{white-space:nowrap;border:1px solid rgba(64,222,158,.18);background:rgba(39,120,83,.08);color:#65dca5;border-radius:999px;padding:9px 12px;font:600 9px "Space Grotesk"}.workspace-head-status span{display:inline-block;width:6px;height:6px;background:#5ae1a2;border-radius:50%;margin-right:6px;box-shadow:0 0 10px #5ae1a2}.workspace-app{border:1px solid #273243;border-radius:16px;background:#080d14;box-shadow:0 28px 90px rgba(0,0,0,.45);overflow:hidden}.workspace-topbar{height:58px;display:flex;align-items:center;gap:18px;padding:0 14px;border-bottom:1px solid #202a37;background:#0b1119}.workspace-brand{font:600 11px "Space Grotesk";white-space:nowrap}.workspace-brand b{background:#ff624a;color:#fff;border-radius:6px;padding:6px 7px;margin-right:7px;font-size:9px}.workspace-brand span{color:#637083}.workspace-languages{display:flex;gap:4px;align-self:stretch;align-items:end}.workspace-languages button{border:0;background:transparent;color:#748195;padding:0 13px 17px;font:600 10px "Space Grotesk";position:relative;cursor:pointer}.workspace-languages button.active{color:#fff}.workspace-languages button.active:after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:#ff624a}.workspace-actions{margin-left:auto;display:flex;gap:6px}.workspace-actions button,.ws-btn{border:1px solid #2a3748;background:#101822;color:#b9c4d1;border-radius:7px;padding:8px 10px;font:600 9px "Space Grotesk";cursor:pointer}.workspace-grid{display:grid;grid-template-columns:210px minmax(0,1fr) minmax(300px,.72fr);min-height:570px}.workspace-sidebar{border-right:1px solid #202a37;background:#0a0f16;padding:17px 12px;min-width:0}.side-label{color:#5e6b7c;font:700 8px "Space Grotesk";letter-spacing:.15em;margin:2px 6px 10px}.side-folder,.side-file{padding:7px 8px;border-radius:6px;color:#8e9aaa;font-size:10px}.side-folder b{color:#d0d7e0}.side-file{margin-top:2px}.side-file.active{background:#141d29;color:#fff}.side-space{margin-top:25px}.workspace-schema{max-height:220px;overflow:auto}.schema-table{padding:7px 6px;border-bottom:1px solid #151d28;color:#a8b3c1;font-size:9px}.schema-table span{display:block;padding:3px 0 0 10px;color:#687789}.schema-table small{color:#465366}.side-db{margin-top:16px;border-top:1px solid #202a37;padding:12px 6px;display:flex;gap:7px;align-items:center;color:#59dca0;font-size:8px}.side-db span{width:6px;height:6px;border-radius:50%;background:#59dca0}.workspace-editor-panel{display:flex;flex-direction:column;min-width:0;background:#080d14}.editor-panel-head,.editor-footer{display:flex;justify-content:space-between;padding:9px 13px;border-bottom:1px solid #1d2733;color:#617084;font:9px ui-monospace,monospace}.editor-footer{border-top:1px solid #1d2733;border-bottom:0;margin-top:auto}.workspace-editor-panel textarea{width:100%;flex:1;min-height:440px;resize:none;border:0;outline:0;background:#080d14;color:#d9e1eb;padding:22px 20px;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4}
/* Native DEX editor override: the textarea is the transparent input layer. */
.workspace-editor-panel .dex-editor-input{color:transparent !important;-webkit-text-fill-color:transparent !important;background:transparent !important;caret-color:#f5f7fa !important;}
.workspace-editor-panel .dex-editor-input::selection{background:rgba(255,120,80,.25) !important;}
.workspace-editor-panel .dex-editor-highlight{color:#d9e1eb !important;}.workspace-output{border-left:1px solid #202a37;background:#0a1018;min-width:0;display:flex;flex-direction:column}.output-tabs{height:42px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #202a37;padding:0 9px}.output-tabs button{border:0;background:transparent;color:#718095;padding:7px 10px;font:600 9px "Space Grotesk";cursor:pointer}.output-tabs button.active{color:#fff;background:#131c28;border-radius:6px}.output-tabs span{margin-left:auto;color:#4bd99d;font:8px ui-monospace}.workspace-output #result{padding:12px;overflow:auto;min-height:150px}.empty-result{display:grid;gap:5px;padding:30px 15px;color:#728095;text-align:center}.empty-result b{color:#cbd3df;font:600 11px "Space Grotesk"}.empty-result span{font-size:9px}.workspace-output .table-wrap{overflow:auto}.workspace-output table{width:100%;border-collapse:collapse;font:9px ui-monospace,monospace}.workspace-output th,.workspace-output td{padding:8px;border-bottom:1px solid #1b2530;text-align:left;white-space:nowrap}.workspace-output th{color:#8f9dae;background:#101721}.workspace-output td{color:#b8c3cf}.workspace-output .success-result{margin:12px;padding:12px;border:1px solid rgba(70,220,157,.15);color:#65dca5;background:rgba(40,130,88,.08);border-radius:8px;font-size:10px}.workspace-output .error-box{margin:12px;padding:12px;background:rgba(255,80,70,.08);border:1px solid rgba(255,80,70,.2);color:#ff8e82;border-radius:8px;font-size:10px}.workspace-workflow{padding:95px 0}.workspace-section-heading{margin-bottom:35px}.workspace-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;border:1px solid #202a36;border-radius:16px;overflow:hidden;background:#0b1017}.workspace-loop>div{padding:25px}.workspace-loop b{color:#ff8b18;font:10px ui-monospace}.workspace-loop strong{display:block;font:700 20px "Space Grotesk";margin:28px 0 7px}.workspace-loop span{display:block;color:#7f8b9b;font-size:11px;line-height:1.5}.workspace-loop>i{display:grid;place-items:center;color:#ff7a5b;font-style:normal}.workspace-languages-section{padding:0 0 100px}.workspace-language-card{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:48px;border:1px solid #202a36;border-radius:22px;background:radial-gradient(circle at 100% 0,rgba(255,100,70,.12),transparent 40%),#0c1118}.workspace-language-card h2{margin-top:14px}.workspace-language-card h2 br+*{}.language-roadmap{display:grid;gap:10px;align-content:center}.language-roadmap>div{display:grid;grid-template-columns:100px 70px 1fr;align-items:center;gap:10px;padding:15px;border:1px solid #202a36;border-radius:10px;background:#0a0f16}.language-roadmap b{font:700 13px "Space Grotesk"}.language-roadmap span{font:700 8px "Space Grotesk";color:#7d8999}.language-roadmap .ready span{color:#57dfa0}.language-roadmap small{color:#677589;font-size:9px}.workspace-final{padding:0 0 110px}.workspace-final-card{text-align:center;padding:80px 20px;border:1px solid #222d3b;border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(255,97,69,.13),transparent 46%),#0c1118}.workspace-final-card h2 em{font-style:normal;background:linear-gradient(100deg,#ff5b42,#ffb62a);-webkit-background-clip:text;background-clip:text;color:transparent}.workspace-final-card .btn{margin-top:22px}
@media(max-width:1050px){.workspace-hero-inner{grid-template-columns:1fr;gap:45px}.workspace-hero-copy{max-width:760px}.workspace-hero-visual{min-height:330px}.workspace-grid{grid-template-columns:190px minmax(0,1fr)}.workspace-output{grid-column:1/-1;border-left:0;border-top:1px solid #202a37;min-height:240px}.workspace-language-card{grid-template-columns:1fr}.workspace-loop{grid-template-columns:repeat(2,1fr)}.workspace-loop>i{display:none}.workspace-loop>div{border-bottom:1px solid #202a36}.workspace-loop>div:nth-child(3){border-right:1px solid #202a36}}
@media(max-width:700px){.workspace-hero{padding:60px 0 50px}.workspace-hero-inner{padding-inline:18px}.workspace-hero h1{font-size:clamp(48px,15vw,70px)}.workspace-hero p{font-size:14px}.workspace-hero-actions{display:grid;grid-template-columns:1fr}.workspace-metrics{grid-template-columns:1fr 1fr}.workspace-metrics div{border-bottom:1px solid #202a37}.workspace-metrics div:nth-child(2){border-right:0}.workspace-metrics div:last-child{grid-column:1/-1;border-bottom:0}.workspace-hero-visual{min-height:280px}.workspace-mini-editor{width:100%;transform:none;animation:none}.workspace-float-tag{display:none}.orbit-a{width:330px;height:160px}.orbit-b{width:390px;height:190px}.workspace-shell{padding:65px 0 75px}.workspace-head{display:block}.workspace-head-status{display:inline-block;margin-top:15px}.workspace-app{border-radius:12px}.workspace-topbar{height:auto;min-height:55px;flex-wrap:wrap;padding:10px}.workspace-brand{width:100%}.workspace-languages{order:3;width:100%;overflow-x:auto}.workspace-languages button{padding:10px 13px 9px;white-space:nowrap}.workspace-actions{position:absolute;right:10px;top:10px}.workspace-grid{display:block}.workspace-sidebar{border-right:0;border-bottom:1px solid #202a37}.workspace-schema{display:none}.workspace-editor-panel textarea{min-height:340px;font-size:11px;padding:17px 13px}.workspace-output{border-top:1px solid #202a37;min-height:230px}.workspace-loop{grid-template-columns:1fr}.workspace-loop>div{border-right:0!important}.workspace-language-card{padding:28px 20px}.language-roadmap>div{grid-template-columns:80px 58px 1fr}.workspace-final-card{padding:60px 18px}.workspace-final-card h2{font-size:38px}}
@media(max-width:380px){.workspace-hero h1{font-size:45px}.workspace-metrics strong{font-size:13px}.workspace-topbar{padding:9px}.workspace-actions button{padding:7px 8px}.workspace-editor-panel textarea{min-height:300px;font-size:13px}.workspace-language-card h2{font-size:36px}.language-roadmap>div{grid-template-columns:70px 55px 1fr}}
@media(prefers-reduced-motion:reduce){.workspace-mini-editor{animation:none}}

/* DEX Editor — native syntax-highlighted editing surface */
.dex-code-editor{display:grid;grid-template-columns:44px minmax(0,1fr);flex:1;min-height:440px;background:#080d14;overflow:hidden}
.dex-editor-gutter{position:relative;z-index:2;padding-top:22px;background:#080d14;border-right:1px solid #111b27;color:#405064;text-align:right;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;user-select:none}
.dex-editor-gutter span{display:block;padding-right:12px;height:24.5px}
.dex-editor-stage{position:relative;min-width:0;min-height:440px;overflow:hidden;background:#080d14}
.dex-editor-highlight,.dex-editor-input{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:22px 20px;border:0;outline:0;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto}
.dex-editor-highlight{z-index:1;color:#d9e1eb;pointer-events:none;transform:translate(0,0);min-width:max-content;min-height:max-content}
.dex-editor-input{z-index:2;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f5f7fa;selection-background-color:rgba(255,120,80,.25);overflow:auto;min-height:0}
.dex-editor-input::selection{background:rgba(255,120,80,.25)}
.dex-editor-input:disabled{cursor:not-allowed}
.dex-editor-highlight .tok-keyword{color:#ff8b5c;font-weight:700}
.dex-editor-highlight .tok-function{color:#67d6ff}
.dex-editor-highlight .tok-string{color:#a7d979}
.dex-editor-highlight .tok-number{color:#d9a7ff}
.dex-editor-highlight .tok-comment{color:#5d6d7f;font-style:italic}
.dex-editor-highlight .tok-operator{color:#f4b86a}
@media(max-width:700px){.dex-code-editor{min-height:340px;grid-template-columns:38px minmax(0,1fr)}.dex-editor-gutter{padding-top:17px;font-size:13px;line-height:1.75}.dex-editor-gutter span{height:22.75px;padding-right:8px}.dex-editor-stage{min-height:340px}.dex-editor-highlight,.dex-editor-input{padding:17px 13px;font-size:13px;line-height:1.75}}


/* Editor v2 — simple hero */
.workspace-hero-simple{padding:88px 0 64px;border-bottom:1px solid #20252e}
.workspace-hero-simple-inner{max-width:1100px}
.workspace-simple-kicker{font:700 11px/1.2 "Space Grotesk",sans-serif;letter-spacing:.16em;color:#6b7789;margin-bottom:28px}
.workspace-simple-kicker:before{content:"";display:inline-block;width:32px;height:1px;background:#ff6a45;vertical-align:middle;margin-right:12px}
.workspace-hero-simple h1{margin:0;font:700 clamp(58px,7vw,88px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.055em;color:#f5f7fb}
.workspace-hero-simple p{max-width:900px;margin:30px 0 0;color:#a8b6c8;font:400 18px/1.8 "Space Grotesk",sans-serif}
.workspace-simple-status{display:inline-flex;align-items:center;gap:10px;margin-top:42px;padding:14px 18px;border:1px solid rgba(255,100,70,.25);border-radius:8px;background:#101218;color:#aeb9c8;font:500 13px/1.2 "Space Grotesk",sans-serif}
.workspace-simple-status span{width:7px;height:7px;border-radius:50%;background:#4fe59b;box-shadow:0 0 12px rgba(79,229,155,.7)}
@media(max-width:700px){.workspace-hero-simple{padding:62px 0 48px}.workspace-hero-simple-inner{padding-inline:18px}.workspace-hero-simple h1{font-size:clamp(48px,14vw,70px)}.workspace-hero-simple p{font-size:15px;line-height:1.65}.workspace-simple-status{margin-top:30px;font-size:11px}}

/* Editor v2.4 UX refresh */
.editor-live-pill{display:inline-flex;align-items:center;margin-left:9px;padding:4px 7px;border:1px solid rgba(70,220,157,.25);border-radius:999px;color:#59dca0;font-size:8px;letter-spacing:.08em;vertical-align:2px}
.editor-head-v24{align-items:end}.editor-head-v24 h2{margin-bottom:9px}.editor-head-v24 p{max-width:700px}
.editor-runtime-status{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 13px;border:1px solid #233142;border-radius:10px;background:#0b121a}
.editor-runtime-status span{grid-row:1/3;width:7px;height:7px;border-radius:50%;background:#58e3a0;box-shadow:0 0 12px rgba(88,227,160,.5)}.editor-runtime-status b{font:600 10px "Space Grotesk",sans-serif;color:#d7dee8}.editor-runtime-status small{color:#65758a;font-size:8px}
.editor-app-v24{border-color:#243143;box-shadow:0 30px 100px rgba(0,0,0,.42),0 0 0 1px rgba(255,100,70,.025)}
/* Editor typography v2.6: consistent readable code sizing */
.editor-grid-v24 .dex-editor-highlight,
.editor-grid-v24 .dex-editor-input {
  font-size:14px;
  line-height:1.75;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.editor-grid-v24 .dex-editor-gutter {
  font-size:14px;
  line-height:1.75;
}
.editor-grid-v24 .dex-editor-gutter span { height:24.5px; }

.editor-topbar-v24{height:62px}.editor-topbar-v24 .workspace-languages button{font-size:10px;padding-left:15px;padding-right:15px}.editor-topbar-v24 .workspace-languages button em{font-style:normal;font-size:7px;margin-left:5px;color:#4fe09a;border:1px solid rgba(79,224,154,.2);padding:2px 4px;border-radius:4px}
.lang-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#8794a7}.lang-dot.sql{background:#ff8b5c}.lang-dot.python{background:#67d6ff}.lang-dot.pyspark{background:#a98cff}
.editor-actions-v24 button:first-child{display:flex;align-items:center;gap:7px}.editor-actions-v24 kbd,.editor-shortcuts kbd{font:500 8px ui-monospace,monospace;color:#7e8da1;border:1px solid #2b3848;border-bottom-color:#1c2734;border-radius:4px;padding:2px 4px;background:#0b1119}
.editor-toolbar-v24{min-height:48px;background:#091019;border-bottom:1px solid #202c3b}.editor-file-v24{gap:9px}.editor-runtime-badge{padding:4px 7px;border:1px solid #263548;border-radius:5px;color:#708198;font:500 8px ui-monospace,monospace}.editor-shortcuts{display:flex;gap:13px;margin-left:auto;margin-right:8px;color:#5f6f83;font-size:8px}.editor-shortcuts span{display:flex;align-items:center;gap:4px}.editor-toolbar-v24 .workspace-toolbar-actions{gap:6px}.editor-toolbar-v24 .ws-btn{min-height:31px}.editor-toolbar-v24 .ws-run{min-height:31px;padding:0 14px;border:1px solid #ff744d;background:linear-gradient(120deg,#ff5b3f,#ff8b28);color:#101116;border-radius:7px;font:700 10px "Space Grotesk";cursor:pointer;box-shadow:0 8px 24px rgba(255,93,54,.16)}.editor-toolbar-v24 .ws-run:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.editor-toolbar-v24 .ws-run span{font-size:8px;margin-right:3px}
.editor-sidebar-v24{padding:18px 12px}.editor-sidebar-v24 .side-file{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.editor-sidebar-v24 .schema-link{display:flex;align-items:center;justify-content:space-between}.editor-sidebar-v24 .schema-link span{font-size:7px;color:#4e6076;text-transform:uppercase;letter-spacing:.05em}.editor-sidebar-v24 .schema-link:hover{background:#121b27;color:#fff}.editor-panel-v24{min-width:0}.editor-panel-head-v24 span:first-child{display:flex;align-items:center;gap:7px}.editor-panel-head-v24 i{width:6px;height:6px;border-radius:50%;background:#ff8b28}.editor-output-v24{min-width:0}.editor-output-tabs{height:48px}.output-tab-group{display:flex;gap:3px}.editor-output-tabs button{padding:8px 11px}.editor-output-tabs span{font-size:8px}.editor-empty-result{min-height:240px;place-items:center}.editor-empty-result .empty-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #283648;border-radius:10px;color:#ff8b5c;font:700 18px ui-monospace}.console-output{margin:12px;padding:16px;min-height:180px;max-height:430px;overflow:auto;border:1px solid #202d3c;border-radius:9px;background:#070b11;color:#b8c6d6;font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.console-output.success{color:#71dfaa;border-color:rgba(71,223,170,.2)}.console-output.error{color:#ff9286;border-color:rgba(255,100,90,.22)}.console-output.muted{color:#77869a}.workspace-output #result[hidden],.console-output[hidden]{display:none!important}
.editor-grid-v24 .dex-code-editor{border-top:0}.editor-footer-v24 b{color:#7e8da0;font-weight:500}
.workspace-app:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}.workspace-app:fullscreen .workspace-grid{min-height:calc(100vh - 110px)}.workspace-app:fullscreen .dex-code-editor{min-height:0}
@media(max-width:1050px){.editor-shortcuts{display:none}.editor-grid-v24{grid-template-columns:190px minmax(0,1fr)}.editor-output-v24{grid-column:1/-1}}
@media(max-width:700px){.editor-head-v24{display:block}.editor-runtime-status{display:inline-grid!important;margin-top:15px}.editor-topbar-v24{height:auto}.editor-topbar-v24 .workspace-brand{width:auto}.editor-topbar-v24 .workspace-actions{top:9px}.editor-topbar-v24 .workspace-languages{margin-top:8px}.editor-toolbar-v24{display:flex;flex-wrap:wrap;gap:8px;padding:8px}.editor-file-v24{width:100%}.editor-toolbar-v24 .workspace-toolbar-actions{margin-left:auto}.editor-grid-v24 .workspace-sidebar{display:block}.editor-sidebar-v24 .workspace-schema{display:none}.editor-grid-v24 .workspace-editor-panel textarea{min-height:420px}.editor-output-v24{min-height:280px}.editor-empty-result{min-height:220px}.editor-live-pill{font-size:7px}}
@media(max-width:480px){.editor-grid-v24 .dex-editor-highlight,
.editor-grid-v24 .dex-editor-input { font-size:13px; line-height:1.75; }
.editor-grid-v24 .dex-editor-gutter { font-size:13px; line-height:1.75; }
.editor-grid-v24 .dex-editor-gutter span { height:22.75px; }
.editor-topbar-v24 .workspace-actions kbd{display:none}.editor-toolbar-v24 .ws-btn{padding:7px 8px}.editor-toolbar-v24 .ws-run{padding:0 11px}.editor-grid-v24 .workspace-sidebar{padding:12px}.editor-grid-v24 .side-file:not(.active){display:none}.editor-grid-v24 .side-folder.dataset-folder{margin-top:12px}.editor-grid-v24 .workspace-editor-panel textarea{min-height:360px}.editor-output-v24 table{font-size:8px}.console-output{font-size:10px}}
/* Editor v2.5 — language-aware database explorer */
.editor-actions-v24 .workspace-explorer-toggle{
  min-height:31px;
  padding:0 10px;
  border:1px solid #263548;
  border-radius:7px;
  background:#0d141d;
  color:#91a1b5;
  font:600 9px/1 "Space Grotesk",sans-serif;
  cursor:pointer;
}
.editor-actions-v24 .workspace-explorer-toggle:hover,
.editor-actions-v24 .workspace-explorer-toggle.is-active{
  color:#f5f7fb;
  border-color:#3a4b60;
  background:#121b26;
}
.editor-app-v24 .workspace-sidebar{
  transition:width .2s ease, opacity .18s ease, padding .2s ease, border-color .2s ease;
}
.editor-app-v24.explorer-collapsed .workspace-sidebar{
  width:0;
  min-width:0;
  padding-left:0;
  padding-right:0;
  border-right-color:transparent;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
.editor-app-v24.explorer-collapsed .workspace-editor-panel{
  border-left:0;
}
@media(max-width:1050px){
  .editor-app-v24.explorer-collapsed .workspace-sidebar{display:none;}
}
@media(max-width:700px){
  .editor-actions-v24 .workspace-explorer-toggle{font-size:8px;padding:0 8px;}
  .editor-app-v24.explorer-collapsed .workspace-sidebar{display:none;}
}


/* Editor v2.5 — collapse database explorer for code-first runtimes */
.editor-app-v24.explorer-collapsed .workspace-grid{
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
}
.editor-app-v24.explorer-collapsed .workspace-sidebar{
  display:none;
}
@media(max-width:1050px){
  .editor-app-v24.explorer-collapsed .workspace-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .editor-app-v24.explorer-collapsed .workspace-output{
    grid-column:1;
  }
}
@media(max-width:700px){
  .editor-app-v24.explorer-collapsed .workspace-grid{display:block}
}

/* Problems v2 — interview-style problem detail */
.problem-screen-v2{background:#080a0e;min-height:100vh;color:#e9edf3}.problem-topbar-v2{position:sticky;top:0;z-index:40;background:rgba(8,10,14,.94);backdrop-filter:blur(12px);border-bottom:1px solid #1d2530}.problem-topbar-inner-v2{max-width:1500px;margin:auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between}.problem-back-v2{color:#b9c2cf;font:600 12px "Space Grotesk";text-decoration:none}.problem-back-v2:hover{color:#fff}.problem-topnav-v2{display:flex;align-items:center;gap:4px}.problem-topnav-v2 a,.problem-topnav-v2 span{min-width:36px;height:32px;display:grid;place-items:center;border:1px solid #252e3a;background:#0e131a;color:#d5dce6;border-radius:7px;text-decoration:none;font:600 11px ui-monospace,monospace}.problem-topnav-v2 span{min-width:72px;color:#7e8b9e;background:transparent}.problem-topnav-v2 a.disabled{opacity:.35;pointer-events:none}.problem-root-v2{max-width:1500px;margin:0 auto}.problem-workspace-v2{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr);min-height:calc(100vh - 53px)}.problem-question-v2{min-width:0;padding:30px 46px 80px;border-right:1px solid #1c2530}.problem-heading-v2{padding-bottom:22px}.problem-kicker-v2{color:#ff7a43;font:700 9px ui-monospace,monospace;letter-spacing:.1em}.problem-kicker-v2 span{color:#657287}.problem-heading-v2 h1{font:700 clamp(34px,3.5vw,54px)/1.05 "Space Grotesk";letter-spacing:-.045em;margin:13px 0 7px;color:#f5f7fa}.problem-subtitle-v2{margin:0;color:#8d9bad;font-size:14px}.problem-meta-v2{display:flex;gap:18px;align-items:center;margin-top:17px;color:#738095;font:10px "Space Grotesk"}.problem-meta-v2 span:first-child{padding:5px 8px;border:1px solid #2a3340;border-radius:6px;color:#e7edf5;background:#111821}.problem-meta-v2 b{color:#7be0aa}.problem-tabs-v2{display:flex;gap:0;border-bottom:1px solid #222b36;margin:0 -46px;padding:0 46px}.problem-tabs-v2 button{border:0;border-bottom:2px solid transparent;background:transparent;color:#7f8c9f;padding:13px 15px;font:600 11px "Space Grotesk";cursor:pointer}.problem-tabs-v2 button.active{color:#fff;border-bottom-color:#ff633f}.problem-tab-panel-v2{padding-top:30px}.problem-copy-v2{font-size:16px;line-height:1.8;color:#c6cfdb}.problem-copy-v2 p{margin:0 0 19px}.problem-copy-v2 .problem-interviewer-v2{color:#dce4ee}.problem-section-v2{padding:24px 0;border-top:1px solid #1b2430}.problem-section-v2 h2,.problem-hints-title-v2 h2{font:700 15px "Space Grotesk";margin:0 0 13px;color:#f1f4f8}.problem-section-v2 ul{margin:0;padding-left:22px;color:#b6c1cf;line-height:1.8}.problem-note-v2{color:#8190a3;font-size:12px;line-height:1.6}.problem-table-title-v2{display:flex;justify-content:space-between;align-items:center;margin:14px 0 7px;color:#dce3ec;font:600 11px "Space Grotesk"}.problem-table-title-v2 span{color:#69778b;font:9px ui-monospace,monospace}.problem-table-wrap-v2{overflow:auto;border:1px solid #242e3a;border-radius:8px;background:#0b1017}.problem-table-wrap-v2 table{width:100%;border-collapse:collapse;font:10px/1.5 ui-monospace,monospace}.problem-table-wrap-v2 th,.problem-table-wrap-v2 td{padding:9px 10px;text-align:left;border-bottom:1px solid #1b2430;white-space:nowrap}.problem-table-wrap-v2 th{color:#8e9bad;background:#101720}.problem-table-wrap-v2 td{color:#c0cbd8}.problem-table-wrap-v2 tr:last-child td{border-bottom:0}.problem-code-v2{margin-top:12px;border:1px solid #252f3c;border-radius:9px;overflow:hidden;background:#090d13}.problem-code-head-v2{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #202a35;color:#6f7d90;font:9px ui-monospace,monospace}.copy-code-v2{border:1px solid #303b4a;background:#111822;color:#aeb9c8;border-radius:5px;padding:5px 8px;font:600 9px "Space Grotesk";cursor:pointer}.problem-code-v2 pre{margin:0;padding:15px;overflow:auto;color:#dfe7f1;font:12px/1.7 ui-monospace,monospace}.problem-code-v2 .token.keyword{color:#8c79ff}.problem-code-v2 .token.function{color:#67b7ff}.problem-code-v2 .token.string{color:#ffad68}.problem-code-v2 .token.number{color:#b3df75}.problem-code-v2 .token.operator{color:#f09aff}.problem-code-v2 .token.comment{color:#647488}.problem-hints-v2{border-top:1px solid #1b2430;padding-top:24px;margin-top:8px}.problem-hints-title-v2{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.problem-hints-title-v2 span{color:#69778a;font-size:10px}.problem-hint-v2{border-top:1px solid #1b2430}.hint-toggle-v2{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:#c8d1dc;padding:15px 2px;text-align:left;cursor:pointer;font:600 12px "Space Grotesk"}.hint-toggle-v2 strong{font-size:17px;color:#ff704d;font-weight:500}.hint-toggle-v2.open{color:#fff}.hint-body-v2{padding:0 0 18px;color:#9caabc;font-size:12px;line-height:1.7}.hint-body-v2 p{margin:0 0 8px}.solution-step-v2{padding:14px 0;border-top:1px solid #1b2430}.solution-step-v2 b{font-size:12px}.solution-step-v2 p{color:#95a2b3;font-size:12px;line-height:1.7}.empty-tab-v2{padding:80px 20px;text-align:center;border-top:1px solid #1b2430;color:#8190a2}.empty-tab-v2 span{font-size:26px;color:#ff704d}.empty-tab-v2 h2{color:#e8edf4;font:700 18px "Space Grotesk"}.empty-tab-v2 p{font-size:12px}.problem-editor-v2{min-width:0;background:#0a0f15}.editor-sticky-v2{position:sticky;top:53px;height:calc(100vh - 53px);display:flex;flex-direction:column;overflow:hidden}.editor-meta-v2{height:58px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-bottom:1px solid #202a36;background:#0c1118}.editor-meta-v2 strong{display:block;font:600 12px "Space Grotesk"}.editor-meta-v2 span{display:block;margin-top:3px;color:#69788d;font-size:9px}.editor-meta-v2 button{width:32px;height:32px;border:1px solid #293545;background:#111822;color:#b9c4d2;border-radius:7px;cursor:pointer}.problem-editor-shell-v2{position:relative;flex:1;min-height:280px;display:grid;grid-template-columns:45px 1fr;background:#080c12;overflow:hidden}.problem-editor-gutter-v2{padding:15px 10px 15px 0;text-align:right;color:#445265;background:#0a0f15;border-right:1px solid #1b2530;font:12px/1.75 ui-monospace,monospace;overflow:hidden}.problem-editor-gutter-v2 span{display:block;height:21px}.problem-editor-shell-v2 pre,.problem-editor-shell-v2 textarea{position:absolute;inset:0 0 0 45px;margin:0;padding:15px 18px;border:0;font:12px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto}.problem-editor-shell-v2 pre{color:#dce5ef;pointer-events:none}.problem-editor-shell-v2 textarea{width:calc(100% - 45px);height:100%;resize:none;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f6f8fb;z-index:2}.problem-editor-shell-v2 textarea::selection{background:rgba(255,105,70,.25)}.problem-editor-shell-v2 .token.keyword{color:#8e7aff}.problem-editor-shell-v2 .token.function{color:#62b9ff}.problem-editor-shell-v2 .token.string{color:#ffad68}.problem-editor-shell-v2 .token.number{color:#b6df75}.problem-editor-shell-v2 .token.operator{color:#ef9aff}.problem-editor-shell-v2 .token.comment{color:#627286}.editor-output-v2{flex:none;border-top:1px solid #202a36;background:#0b1017;max-height:290px;display:flex;flex-direction:column}.output-title-v2{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #202a36}.output-title-v2 strong{font:600 12px "Space Grotesk"}.output-title-v2 button{border:0;background:transparent;color:#8693a4;font-size:15px;cursor:pointer}.problem-result-v2{min-height:125px;max-height:245px;overflow:auto;padding:12px}.empty-result-v2,.running-result-v2,.error-result-v2,.success-result-v2{padding:28px 15px;color:#718096;text-align:center;font-size:10px}.error-result-v2{color:#ff9283}.success-result-v2{color:#68dda2}.result-status-v2{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:9px 10px;border:1px solid #293444;border-radius:7px;font-size:10px}.result-status-v2.correct{color:#67dda2;border-color:rgba(70,220,157,.22)}.result-status-v2.wrong{color:#ffb06d;border-color:rgba(255,150,70,.22)}.result-status-v2 span{color:#748296}.result-table-v2 table{font-size:9px}.editor-actions-v2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;background:#0b1017;border-top:1px solid #202a36}.editor-actions-v2 button{height:42px;border-radius:7px;font:700 11px "Space Grotesk";cursor:pointer}.run-code-v2{border:1px solid #ff6243;background:transparent;color:#ff7558}.submit-code-v2{border:1px solid #ff6243;background:#ff5d3d;color:#fff}.editor-actions-v2 button:disabled{opacity:.5;cursor:not-allowed}.problem-not-found-v2{max-width:800px;margin:100px auto;padding:50px;text-align:center}.problem-not-found-v2 h1{font:700 36px "Space Grotesk"}.problem-not-found-v2 a{color:#ff704d}
@media(max-width:1050px){.problem-workspace-v2{grid-template-columns:minmax(0,1fr) minmax(390px,.72fr)}.problem-question-v2{padding-inline:30px}.problem-tabs-v2{margin-inline:-30px;padding-inline:30px}}
@media(max-width:760px){.problem-topbar-inner-v2{padding:9px 14px}.problem-workspace-v2{display:block}.problem-question-v2{border-right:0;padding:24px 18px 40px}.problem-tabs-v2{margin-inline:-18px;padding-inline:18px;overflow:auto}.problem-tabs-v2 button{white-space:nowrap}.problem-editor-v2{border-top:1px solid #202a36}.editor-sticky-v2{position:relative;top:auto;height:620px}.problem-editor-shell-v2{min-height:280px}.problem-heading-v2 h1{font-size:38px}.problem-meta-v2{flex-wrap:wrap;gap:8px 14px}.problem-code-v2 pre{font-size:11px}.problem-copy-v2{font-size:14px}.problem-table-wrap-v2 table{font-size:9px}}

/* =========================================================
   PROBLEM WORKSPACE V2.3 — independent question scroll + fixed editor
   ========================================================= */
.problem-workspace-v2{height:calc(100vh - 120px);min-height:0;overflow:hidden}
.problem-question-v2{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.problem-editor-v2{position:sticky;top:120px;height:calc(100vh - 120px);min-height:0;align-self:start;overflow:hidden}
.editor-sticky-v2{position:static;top:auto;height:100%;min-height:0;max-height:none}
.copy-code-v2.copied{border-color:#3aa878;color:#72e0aa}
@media(max-width:1050px){
  .problem-workspace-v2{height:calc(100vh - 120px)}
  .problem-question-v2{height:100%}
  .problem-editor-v2{top:120px;height:calc(100vh - 120px)}
}
@media(max-width:760px){
  .problem-workspace-v2{height:auto;min-height:0;overflow:visible}
  .problem-question-v2{height:auto;overflow:visible}
  .problem-editor-v2{position:relative;top:auto;height:620px;min-height:620px;overflow:hidden}
  .editor-sticky-v2{position:static;height:100%;min-height:0}
}

/* =========================================================
   PROBLEM WORKSPACE V2.2 — desktop UX refinement
   ========================================================= */
.problem-topbar-v2{top:72px}
.problem-topbar-inner-v2{max-width:1600px;padding:9px 28px;min-height:48px}
.problem-breadcrumb-v2{display:flex;align-items:center;gap:10px;min-width:0}
.problem-breadcrumb-v2>span{color:#465365;font-size:11px}
.problem-breadcrumb-v2 strong{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f8da0;font:600 11px "Space Grotesk"}
.problem-root-v2{max-width:1600px}
.problem-workspace-v2{grid-template-columns:minmax(0,1.06fr) minmax(560px,.94fr);min-height:calc(100vh - 120px)}
.problem-question-v2{padding:34px 52px 90px}
.problem-heading-v2{max-width:920px;padding-bottom:24px}
.problem-heading-v2 h1{max-width:900px}
.problem-meta-v2{gap:16px}
.problem-meta-v2 .meta-pill-v2{padding:5px 9px;border:1px solid #2a3340;border-radius:6px;color:#e7edf5;background:#111821}
.problem-tabs-v2{margin:0 -52px;padding:0 52px}
.problem-tab-panel-v2{max-width:900px}
.problem-copy-v2{max-width:880px}
.problem-section-v2{max-width:900px}
.problem-hints-v2{max-width:900px}
.problem-editor-v2{background:#080d13;border-left:1px solid #1c2530}
.editor-sticky-v2{top:120px;height:calc(100vh - 205px);min-height:620px;max-height:820px;display:grid;grid-template-rows:56px minmax(260px,1fr) 155px 66px;overflow:hidden}
.editor-meta-v2{height:auto;padding:0 16px}
.problem-editor-shell-v2{min-height:0}
.problem-editor-shell-v2 pre,.problem-editor-shell-v2 textarea{font-size:13px;line-height:1.75}
.editor-output-v2{max-height:none;min-height:0;overflow:hidden}
.problem-result-v2{min-height:0;max-height:none;overflow:auto;padding:10px}
.empty-result-v2,.running-result-v2,.error-result-v2,.success-result-v2{padding:20px 12px}
.editor-actions-v2{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px}
.editor-shortcut-v2{color:#647286;font:10px/1.4 "DM Mono",monospace;max-width:220px}
.editor-action-buttons-v2{display:flex;gap:8px;flex:none}
.editor-action-buttons-v2 button{min-width:108px}

@media(max-width:1050px){
  .problem-topbar-v2{top:72px}
  .problem-workspace-v2{grid-template-columns:minmax(0,1fr) minmax(440px,.78fr)}
  .problem-question-v2{padding-inline:30px}
  .problem-tabs-v2{margin-inline:-30px;padding-inline:30px}
  .editor-sticky-v2{top:120px;height:calc(100vh - 205px);min-height:600px;grid-template-rows:54px minmax(240px,1fr) 145px 64px}
}
@media(max-width:760px){
  .problem-topbar-v2{top:0}
  .problem-topbar-inner-v2{padding:8px 14px}
  .problem-breadcrumb-v2 strong{display:none}
  .problem-workspace-v2{display:block}
  .problem-question-v2{padding:24px 18px 40px}
  .problem-tabs-v2{margin-inline:-18px;padding-inline:18px;overflow:auto}
  .problem-tab-panel-v2,.problem-section-v2,.problem-hints-v2{max-width:none}
  .problem-editor-v2{border-left:0;border-top:1px solid #202a36}
  .editor-sticky-v2{position:relative;top:auto;height:680px;min-height:680px;max-height:none;grid-template-rows:56px minmax(300px,1fr) 165px 72px}
  .editor-shortcut-v2{display:none}
  .editor-actions-v2{justify-content:stretch}
  .editor-action-buttons-v2{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .editor-action-buttons-v2 button{width:100%}
}


/* SQL Engineering v2.1 — persistent lesson sidebar */
.sql-direct-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
.sql-direct-sidebar{position:sticky;top:96px;align-self:start;border:1px solid rgba(255,255,255,.08);background:#0b0d12;border-radius:14px;padding:14px;max-height:calc(100vh - 120px);overflow:auto}
.sql-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 10px}
.sql-sidebar-kicker{font:700 10px/1 'DM Mono',monospace;letter-spacing:.13em;color:#ff7b3d}
.sql-sidebar-progress{font:600 10px/1 'DM Mono',monospace;color:#8a95a4}
.sql-sidebar-progress-track{height:3px;background:#171b22;border-radius:99px;overflow:hidden;margin:0 4px 12px}
.sql-sidebar-progress-track .sql-progress-fill{display:block;height:100%;width:0;background:#ff6a22;transition:width .25s ease}
.sql-direct-nav{display:grid;gap:3px}
.sql-direct-nav a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;align-items:start;padding:10px 9px;border:1px solid transparent;border-radius:9px;color:#8994a2;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.sql-direct-nav a:hover{background:#11151c;color:#e9edf2;border-color:rgba(255,255,255,.06)}
.sql-direct-nav a.active{background:rgba(255,106,34,.08);border-color:rgba(255,106,34,.25);color:#fff}
.sql-sidebar-number{font:700 10px/1.5 'DM Mono',monospace;color:#596473;padding-top:1px}
.sql-direct-nav a.active .sql-sidebar-number{color:#ff7b3d}
.sql-sidebar-copy{min-width:0}
.sql-sidebar-copy strong{display:block;font:600 11px/1.35 'DM Mono',monospace;white-space:normal}
.sql-sidebar-copy small{display:block;margin-top:3px;color:#596473;font:600 8px/1.2 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.sql-direct-nav a.active .sql-sidebar-copy small{color:#8f684f}
.sql-direct-layout .sql-direct-lesson{min-width:0;margin-top:0!important}
.sql-direct-layout .sql-direct-lesson .sql-inline-lesson-head{padding-top:4px}
@media(max-width:900px){
  .sql-direct-layout{grid-template-columns:210px minmax(0,1fr);gap:24px}
  .sql-direct-sidebar{top:84px}
}
@media(max-width:720px){
  .sql-direct-layout{display:block}
  .sql-direct-sidebar{position:sticky;top:84px;z-index:20;max-height:calc(100vh - 104px);margin-bottom:18px;padding:10px}
  .sql-sidebar-head{padding:4px}
  .sql-direct-nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
  .sql-direct-nav a{min-width:190px;flex:0 0 190px}
  .sql-direct-layout .sql-direct-lesson{margin-top:28px!important}
}
.sql-direct-nav a.is-complete .sql-sidebar-number::after{content:' ✓';color:#69d391}

/* SQL ENGINEERING — interactive lesson + exercise compiler */
.sql-description-section .sql-description-copy{font-size:18px;line-height:1.8;max-width:820px;color:#c1c9d4}
.sql-interactive-exercise{border-top:1px solid rgba(255,255,255,.1)!important}
.sql-exercise-intro{max-width:900px!important;margin:0 0 24px!important}
.sql-exercise-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);gap:14px;margin-top:22px}
.sql-data-panel,.sql-task-panel,.sql-compiler-panel{border:1px solid rgba(255,255,255,.09);background:#0b0e13;border-radius:14px;overflow:hidden}
.sql-data-panel{min-width:0}
.sql-panel-label{font:700 10px/1.2 'DM Mono',monospace;letter-spacing:.12em;color:#7f8b9a;text-transform:uppercase}
.sql-data-panel>.sql-panel-label{padding:16px 16px 0}
.sql-table-wrap{overflow:auto;max-height:360px}
.sql-table-wrap table,.sql-result-wrap table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.sql-table-wrap th,.sql-result-wrap th{text-align:left;background:#171b21;color:#e8edf3;font-weight:700;position:sticky;top:0;z-index:1}
.sql-table-wrap th,.sql-table-wrap td,.sql-result-wrap th,.sql-result-wrap td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.sql-table-wrap td,.sql-result-wrap td{color:#aeb8c5}
.sql-table-wrap tbody tr:nth-child(even),.sql-result-wrap tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.sql-task-panel{display:flex;flex-direction:column;min-height:100%}
.sql-task-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sql-task-head strong{font-size:14px;color:#f4f6f8}
.sql-task-head span{font:700 10px 'DM Mono',monospace;color:#ff9f1c;white-space:nowrap}
.sql-task-list{list-style:none;margin:0;padding:8px;overflow:auto;max-height:360px}
.sql-task-item{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) 18px;gap:9px;align-items:start;text-align:left;padding:12px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#9ca7b5;cursor:pointer}
.sql-task-item:hover{background:#12161d;color:#e9edf2}
.sql-task-item.active{background:rgba(255,106,34,.08);border-color:rgba(255,106,34,.24);color:#fff}
.sql-task-index{width:24px;height:24px;display:grid;place-items:center;border:1px solid #303742;border-radius:50%;font:700 10px 'DM Mono',monospace;color:#7f8997}
.sql-task-item.active .sql-task-index{border-color:#ff7b3d;color:#ff9f1c}
.sql-task-copy{display:grid;gap:5px;min-width:0}
.sql-task-copy strong{font-size:13px;line-height:1.3}
.sql-task-copy small{font-size:11px;line-height:1.45;color:#737e8c}
.sql-task-item.active .sql-task-copy small{color:#aeb7c2}
.sql-task-check{opacity:0;color:#65d391;font-weight:800;padding-top:2px}
.sql-task-item.is-solved .sql-task-check{opacity:1}
.sql-task-help{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.55;color:#8f9aa8}
.sql-task-help strong{color:#ffb16a}
.sql-compiler-panel{margin-top:14px}
.sql-compiler-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sql-compiler-head>div:first-child{display:grid;gap:6px}
.sql-compiler-head>div:first-child>span{font-size:12px;color:#7f8b99}
.sql-compiler-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.sql-compiler-btn{border:1px solid #303844;background:#11161d;color:#dce3eb;border-radius:8px;padding:9px 12px;cursor:pointer;font:700 11px 'DM Mono',monospace}
.sql-compiler-btn:hover{border-color:#ff9f1c;color:#fff}
.sql-compiler-check{background:#ff7b3d;border-color:#ff7b3d;color:#111}
.sql-compiler-check:hover{background:#ff9b63;border-color:#ff9b63;color:#111}
.sql-exercise-editor{display:block;width:100%;min-height:170px;resize:vertical;box-sizing:border-box;border:0;border-bottom:1px solid rgba(255,255,255,.07);outline:none;background:#080b0f;color:#dbe4ed;padding:18px;font:14px/1.7 'DM Mono',monospace;tab-size:2}
.sql-exercise-editor:focus{box-shadow:inset 0 0 0 1px rgba(255,123,61,.35)}
.sql-compiler-status{padding:10px 16px;color:#7f8b99;font:600 11px 'DM Mono',monospace;background:#0a0d11}
.sql-compiler-status.success{color:#65d391}.sql-compiler-status.error{color:#ff8d7a}.sql-compiler-status.loading{color:#ffb16a}
.sql-result-wrap{border-top:1px solid rgba(255,255,255,.07);padding:16px;overflow:auto}
.sql-result-wrap .sql-panel-label{margin-bottom:10px}
.sql-empty-result{padding:14px;border:1px dashed #303844;border-radius:8px;color:#8d98a7;font-size:12px}
.sql-exercise-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:16px;border:1px solid rgba(255,255,255,.08);background:#0b0e13;border-radius:12px}
.sql-finish-tasks{border:1px solid #3a424e;background:#161b22;color:#fff;border-radius:8px;padding:11px 15px;font:700 11px 'DM Mono',monospace;cursor:pointer}
.sql-finish-tasks:not(:disabled):hover{border-color:#ff7b3d;color:#ffb16a}.sql-finish-tasks:disabled{opacity:.45;cursor:not-allowed}
.sql-exercise-footer span{font-size:12px;color:#727e8c;text-align:right}
@media(max-width:820px){
  .sql-exercise-grid{grid-template-columns:1fr}
  .sql-task-list{max-height:none}
  .sql-compiler-head{align-items:flex-start;flex-direction:column}
  .sql-compiler-actions{width:100%;justify-content:flex-start}
}
@media(max-width:560px){
  .sql-description-section .sql-description-copy{font-size:15px}
  .sql-exercise-intro{font-size:14px!important}
  .sql-task-head{align-items:flex-start;flex-direction:column}
  .sql-compiler-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .sql-compiler-btn{min-height:42px}
  .sql-compiler-check{grid-column:span 2}
  .sql-exercise-editor{min-height:190px;font-size:13px}
  .sql-exercise-footer{align-items:flex-start;flex-direction:column}
  .sql-exercise-footer span{text-align:left}
}

/* SQL Engineering v2.5 — continuous lesson layout */
.sql-direct-layout .sql-direct-lesson{background:transparent;border:0;box-shadow:none}
.sql-direct-layout .sql-inline-lesson-head{padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.10)}
.sql-direct-layout .sql-lesson-content{min-width:0}
.sql-direct-layout .sql-content-row{padding:30px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sql-direct-layout .sql-content-row:last-child{border-bottom:0}
.sql-direct-layout .sql-description-row{padding-top:28px}
.sql-direct-layout .sql-eyebrow{margin-bottom:10px;font:700 11px/1.2 'DM Mono',monospace;letter-spacing:.12em;color:#ff9f1c}
.sql-direct-layout .sql-description-copy{margin:0;max-width:860px;font-size:18px;line-height:1.85;color:#c7ced8;white-space:pre-line}
.sql-direct-layout .sql-optional-row{position:relative}
.sql-direct-layout .sql-inline-code{margin:0;white-space:pre-wrap;overflow:auto;font:14px/1.75 'DM Mono',monospace;color:#dbe4ed;background:transparent}
.sql-direct-layout .sql-code-wrap{position:relative;padding-right:72px}
.sql-direct-layout .sql-code-wrap .sql-inline-code{padding:0}
.sql-direct-layout .sql-code-copy{position:absolute;right:0;top:0;border:1px solid #303844;background:#10151b;color:#9da8b5;border-radius:7px;padding:7px 10px;font:700 10px 'DM Mono',monospace;cursor:pointer}
.sql-direct-layout .sql-code-copy:hover{border-color:#ff9f1c;color:#fff}
.sql-direct-layout .sql-interactive-exercise{padding-top:34px}
.sql-direct-layout .sql-interactive-exercise>h2{margin:0 0 8px;font-size:30px;letter-spacing:-.025em;color:#f4f6f8}
.sql-direct-layout .sql-exercise-intro{margin:0 0 24px;max-width:860px;color:#9da8b5;line-height:1.7}
.sql-direct-layout .sql-exercise-grid{border:0;background:transparent;box-shadow:none}
.sql-direct-layout .sql-data-panel,.sql-direct-layout .sql-task-panel,.sql-direct-layout .sql-compiler-panel,.sql-direct-layout .sql-exercise-footer{border:1px solid rgba(255,255,255,.08);background:#0b0f14;box-shadow:none}
@media(max-width:560px){
 .sql-direct-layout .sql-description-copy{font-size:15px}
 .sql-direct-layout .sql-content-row{padding:24px 0}
 .sql-direct-layout .sql-inline-code{font-size:12px}
 .sql-direct-layout .sql-interactive-exercise>h2{font-size:25px}
}

/* SQL Engineering v2.7 — lesson code syntax highlighting */
.sql-direct-layout .sql-inline-code{color:#dbe4ed;text-shadow:none}
.sql-direct-layout .sql-tok-keyword{color:#ff9f1c;font-weight:700}
.sql-direct-layout .sql-tok-function{color:#67d6ff;font-weight:600}
.sql-direct-layout .sql-tok-string{color:#a7d979}
.sql-direct-layout .sql-tok-number{color:#d9a7ff}
.sql-direct-layout .sql-tok-comment{color:#64748b;font-style:italic}
.sql-direct-layout .sql-tok-operator{color:#f4b86a}
.sql-direct-layout .sql-inline-code .sql-tok-keyword,
.sql-direct-layout .sql-inline-code .sql-tok-function,
.sql-direct-layout .sql-inline-code .sql-tok-string,
.sql-direct-layout .sql-inline-code .sql-tok-number,
.sql-direct-layout .sql-inline-code .sql-tok-comment,
.sql-direct-layout .sql-inline-code .sql-tok-operator{font:inherit}

/* SQL Engineering v2.9 — exercise editor syntax highlighting */
.sql-exercise-code-stage{position:relative;min-height:260px;background:#080b0f;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07)}
.sql-exercise-code-stage .sql-exercise-highlight,
.sql-exercise-code-stage .sql-exercise-editor{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:18px;font:14px/1.7 'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}
.sql-exercise-code-stage .sql-exercise-highlight{z-index:1;color:#dbe4ed;pointer-events:none;background:transparent;border:0;min-width:max-content;min-height:max-content;overflow:hidden}
.sql-exercise-code-stage .sql-exercise-editor{z-index:2;display:block;resize:vertical;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f4f6f8;tab-size:2}
.sql-exercise-code-stage.is-focused{box-shadow:inset 0 0 0 1px rgba(255,123,61,.35)}
.sql-exercise-code-stage .sql-tok-keyword{color:#ff9f1c;font-weight:700}
.sql-exercise-code-stage .sql-tok-function{color:#67d6ff;font-weight:600}
.sql-exercise-code-stage .sql-tok-string{color:#a7d979}
.sql-exercise-code-stage .sql-tok-number{color:#d9a7ff}
.sql-exercise-code-stage .sql-tok-comment{color:#64748b;font-style:italic}
.sql-exercise-code-stage .sql-tok-operator{color:#f4b86a}
.sql-exercise-code-stage .sql-tok-keyword,
.sql-exercise-code-stage .sql-tok-function,
.sql-exercise-code-stage .sql-tok-string,
.sql-exercise-code-stage .sql-tok-number,
.sql-exercise-code-stage .sql-tok-comment,
.sql-exercise-code-stage .sql-tok-operator{font:inherit}
@media(max-width:700px){
  .sql-exercise-code-stage{min-height:230px}
  .sql-exercise-code-stage .sql-exercise-highlight,
  .sql-exercise-code-stage .sql-exercise-editor{padding:16px 13px;font-size:13px;line-height:1.75}
}

/* SQL Engineering v3.0 — restore full-width space utilization without changing highlighting */
@media(min-width:901px){
  .sql-direct-container{width:min(1480px,calc(100% - 64px));margin:0 auto}
  .sql-direct-layout{grid-template-columns:280px minmax(0,1fr);gap:40px}
  .sql-direct-sidebar{position:sticky;top:96px;max-height:none;overflow:visible;align-self:start}
  .sql-direct-lesson{min-width:0}
  .sql-direct-layout .sql-inline-lesson-head h1{max-width:none}
  .sql-direct-layout .sql-description-copy,
  .sql-direct-layout .sql-exercise-intro{max-width:1100px}
}
@media(min-width:901px) and (max-width:1200px){
  .sql-direct-container{width:min(1120px,calc(100% - 48px))}
  .sql-direct-layout{grid-template-columns:250px minmax(0,1fr);gap:28px}
}


/* Python Fundamentals learning experience */
.python-fund-layout{width:min(1480px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;align-items:start;padding:42px 0 80px}
.python-fund-sidebar{position:sticky;top:92px;align-self:start;max-height:calc(100vh - 116px);overflow:auto;padding-right:6px}
.python-fund-side-head{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:0 4px 14px;border-bottom:1px solid var(--line)}
.python-fund-side-head strong{font:600 12px "DM Mono",monospace;color:var(--muted)}
.python-fund-nav{display:grid;gap:4px;margin-top:12px}
.python-fund-nav a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:11px 10px;border:1px solid transparent;border-radius:9px;color:#aeb4bd;text-decoration:none}
.python-fund-nav a span{font:600 11px "DM Mono",monospace;color:#666d77}.python-fund-nav a b{font:600 13px "Space Grotesk",sans-serif}.python-fund-nav a:hover{color:#fff;background:#101216;border-color:#242831}.python-fund-nav a.is-active{color:#fff;background:rgba(255,193,7,.06);border-color:rgba(255,193,7,.35)}.python-fund-nav a.is-active span{color:#ffd166}
.python-fund-main{min-width:0;max-width:1100px}.python-back{display:inline-block;color:#8f969f;text-decoration:none;font-size:13px;margin-bottom:28px}.python-back:hover{color:#fff}.python-fund-kicker{font:600 11px "DM Mono",monospace;letter-spacing:.12em;color:#777e88;margin-bottom:12px}.python-fund-kicker span{color:#d6a90a}.python-fund-main h1{font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px}.python-fund-description{max-width:900px;font-size:18px;line-height:1.75;color:#aeb4bd;margin:0 0 34px;white-space:pre-line}.python-fund-description h3{font-size:20px;line-height:1.3;color:#f0f2f5;margin:30px 0 10px}.python-fund-description h4{font-size:17px;line-height:1.35;color:#f0f2f5;margin:24px 0 8px}.python-fund-description p{margin:0 0 18px}.python-fund-description ul,.python-fund-description ol{margin:10px 0 20px;padding-left:24px}.python-fund-description li{margin:6px 0}.python-fund-main h2{font-size:22px;margin:34px 0 13px}.py-code-wrap{margin:12px 0 30px;background:#07090c;border:1px solid #272c34;border-radius:10px;overflow:hidden}.py-code-head{height:40px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242830;color:#737b86;font:600 10px "DM Mono",monospace;letter-spacing:.08em}.py-code-head button{border:1px solid #333943;background:#111419;color:#b9bec6;border-radius:6px;padding:5px 9px;font-size:11px;cursor:pointer}.py-code-wrap pre{margin:0;padding:18px 20px;overflow:auto;white-space:pre;min-height:52px;font:14px/1.8 "DM Mono",ui-monospace,monospace;color:#dce0e5}.py-hl-keyword{color:#ffb86b}.py-hl-string{color:#a8e6a3}.py-hl-number{color:#c9a7ff}.py-hl-function{color:#67d6ff}.py-hl-comment{color:#6f7884;font-style:italic}
.py-exercise{margin-top:44px;padding-top:4px}.py-exercise-kicker{font:700 11px "DM Mono",monospace;letter-spacing:.12em;color:#ffd166}.py-exercise h2{margin-top:7px;font-size:28px};color:#f4f6f8.py-exercise>p{color:#9da4ae;font-size:15px;line-height:1.7;max-width:900px}.py-taskbar{display:flex;gap:8px;overflow-x:auto;padding:8px 0 14px;margin:8px 0}.py-taskbar button{flex:none;display:flex;align-items:center;gap:8px;background:transparent;border:1px solid #2a2f37;color:#8f969f;border-radius:7px;padding:9px 12px;cursor:pointer}.py-taskbar button span{font:600 10px "DM Mono",monospace}.py-taskbar button.is-active{color:#fff;border-color:#d8a900;background:rgba(255,209,102,.06)}.py-practice{margin-top:4px}.py-task-panel{min-width:0}.py-task-title{font:700 17px "Space Grotesk",sans-serif;margin-top:8px};color:#f4f6f8.py-task-panel>p{color:#9da4ae;margin:7px 0 15px}.py-editor-wrap{border:1px solid #2a2f37;border-radius:9px;background:#07090c;overflow:hidden}.py-editor-wrap textarea{display:block;width:100%;min-height:210px;resize:vertical;border:0;outline:none;background:transparent;color:#e4e7eb;padding:18px 20px;font:14px/1.8 "DM Mono",monospace;tab-size:4}.py-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.py-actions .btn{cursor:pointer}.py-actions span{font:600 12px "DM Mono",monospace;color:#8d949e}.py-actions span.is-success{color:#7ee787}.py-actions span.is-error{color:#ff7b72}.py-output{margin:0;padding:15px 18px;min-height:80px;overflow:auto;background:#080a0d;border:1px solid #242932;border-radius:8px;color:#bfc5ce;font:13px/1.7 "DM Mono",monospace;white-space:pre-wrap}.py-lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:55px;padding-top:22px;border-top:1px solid var(--line)}.py-lesson-nav button{background:transparent;border:0;color:#b9bec6;text-align:left;padding:12px 0;cursor:pointer}.py-lesson-nav button:last-child{text-align:right}.py-lesson-nav button:hover{color:#fff}
@media (max-width:900px){.python-fund-layout{width:min(100% - 30px,1100px);grid-template-columns:210px minmax(0,1fr);gap:24px}.python-fund-main h1{font-size:38px}}
@media (max-width:720px){.python-fund-layout{display:block;width:calc(100% - 24px);padding-top:24px}.python-fund-sidebar{position:static;max-height:none;overflow:visible;padding:0;margin-bottom:24px}.python-fund-nav{display:flex;overflow-x:auto;gap:7px;padding-bottom:4px}.python-fund-nav a{flex:0 0 auto;display:flex;gap:8px;white-space:nowrap;padding:9px 11px}.python-fund-nav a b{font-size:12px}.python-fund-nav a span{font-size:10px}.python-fund-main h1{font-size:34px}.python-fund-description{font-size:16px}.py-code-wrap pre{font-size:13px}.py-editor-wrap textarea{font-size:13px;min-height:190px}.py-lesson-nav{margin-top:38px}}

/* Python Fundamentals v1.1 — continuous code editor with syntax highlighting */
.py-editor-wrap{position:relative;min-height:250px;background:#07090c;overflow:hidden}
.py-editor-wrap .py-editor-highlight,
.py-editor-wrap #pyExerciseEditor{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:18px 20px;font:14px/1.8 "DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto;word-wrap:normal}
.py-editor-wrap .py-editor-highlight{z-index:1;pointer-events:none;color:#dce2ea;background:transparent;border:0;min-width:max-content;min-height:max-content}
.py-editor-wrap #pyExerciseEditor{z-index:2;display:block;resize:vertical;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f4f6f8}
.py-editor-wrap:focus-within{box-shadow:inset 0 0 0 1px rgba(255,193,7,.35)}
.py-editor-wrap .py-hl-keyword{color:#ffb86b;font-weight:700}.py-editor-wrap .py-hl-string{color:#a8e6a3}.py-editor-wrap .py-hl-number{color:#c9a7ff}.py-editor-wrap .py-hl-function{color:#67d6ff;font-weight:600}.py-editor-wrap .py-hl-comment{color:#6f7884;font-style:italic}
@media(max-width:720px){.py-editor-wrap,.py-editor-wrap .py-editor-highlight,.py-editor-wrap #pyExerciseEditor{min-height:220px}.py-editor-wrap .py-editor-highlight,.py-editor-wrap #pyExerciseEditor{padding:16px 13px;font-size:13px;line-height:1.75}}

/* Python Fundamentals v1.2 — layout/editor stability */
.python-fund-layout{width:min(1480px,calc(100% - 64px));margin:0 auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start;padding:42px 0 80px}
.python-fund-sidebar{position:sticky;top:96px;align-self:start;max-height:none;overflow:visible;padding-right:0}
.python-fund-main{min-width:0;max-width:none;width:100%}
.python-fund-main h1{max-width:none}
.python-fund-description{max-width:1100px}
.py-code-wrap{max-width:none}
.py-code-wrap pre{overflow-x:auto}
.py-editor-wrap{position:relative;height:330px;min-height:330px;overflow:hidden}
.py-editor-wrap .py-editor-highlight,.py-editor-wrap #pyExerciseEditor{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:18px 20px;font:14px/1.8 "DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto;word-wrap:normal}
.py-editor-wrap .py-editor-highlight{z-index:1;pointer-events:none;color:#dce2ea;background:transparent;border:0;min-width:100%;min-height:100%;transform:translate(0,0);will-change:transform}
.py-editor-wrap #pyExerciseEditor{z-index:2;display:block;resize:none;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f4f6f8}
.py-editor-wrap:focus-within{box-shadow:inset 0 0 0 1px rgba(255,193,7,.35)}
@media(max-width:900px){.python-fund-layout{width:min(100% - 30px,1200px);grid-template-columns:220px minmax(0,1fr);gap:28px}.python-fund-main{max-width:none}}
@media(max-width:720px){.python-fund-layout{display:block;width:calc(100% - 24px);padding-top:24px}.python-fund-sidebar{position:static;max-height:none;overflow:visible;padding:0;margin-bottom:24px}.python-fund-nav{display:flex;overflow-x:auto;gap:7px;padding-bottom:4px}.python-fund-nav a{flex:0 0 auto;display:flex;gap:8px;white-space:nowrap;padding:9px 11px}.python-fund-main{width:100%}.py-editor-wrap{height:260px;min-height:260px}.py-editor-wrap .py-editor-highlight,.py-editor-wrap #pyExerciseEditor{padding:16px 13px;font-size:13px;line-height:1.75}}


/* Learn track cards — direct learning routes */
.learn-card-link{cursor:pointer;position:relative}
.learn-card-link:hover{border-color:rgba(255,106,34,.28);background:rgba(255,255,255,.025);transform:translateY(-1px)}
.learn-card-link:focus-visible{outline:2px solid #ff9a44;outline-offset:3px}
.learn-card-link::after{content:'OPEN →';position:absolute;right:20px;top:20px;font:700 9px/1 'DM Mono',monospace;letter-spacing:.08em;color:#ff9a44;opacity:.75}


/* =========================================================
   PROJECTS — COMING SOON
   Scoped only to the Projects screen.
   ========================================================= */
.projects-coming-soon-page .projects-coming-hero {
  min-height: 680px;
}
.projects-coming-soon-page .coming-soon-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.projects-coming-soon-page .coming-status {
  padding: 42px 34px;
  text-align: center;
}
.projects-coming-soon-page .coming-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 38px;
  color: #ffb020;
  background: rgba(255,176,32,.07);
}
.projects-coming-soon-page .coming-status strong {
  display: block;
  font-size: 18px;
  letter-spacing: .08em;
}
.projects-coming-soon-page .coming-status p {
  max-width: 340px;
  margin: 12px auto 0;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
}
.projects-coming-soon-page .coming-feature-grid .workflow-step {
  min-height: 150px;
}
.projects-coming-soon-page .coming-area-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.projects-coming-soon-page .coming-area-card {
  cursor: default;
}
.projects-coming-soon-page .coming-area-card:hover {
  transform: none;
}
.projects-coming-soon-page .coming-area-card .project-card-top {
  align-items: center;
}
.projects-coming-soon-page .coming-area-card .difficulty {
  color: #ffb020;
  border-color: rgba(255,176,32,.28);
}
@media (max-width: 900px) {
  .projects-coming-soon-page .coming-area-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .projects-coming-soon-page .projects-coming-hero {
    min-height: auto;
  }
  .projects-coming-soon-page .coming-soon-card {
    min-height: 360px;
  }
  .projects-coming-soon-page .coming-status {
    padding: 30px 20px;
  }
}

/* =========================================================
   SIMPLE DAILY JOBS SCREEN
   ========================================================= */
.jobs-simple-hero{padding:76px 0 48px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 82% 20%,rgba(255,59,48,.12),transparent 34%)}
.jobs-simple-hero h1{font:700 clamp(42px,6vw,70px)/1.04 "Space Grotesk";letter-spacing:-.04em;margin:12px 0 18px;max-width:850px}.jobs-simple-hero h1 span{color:var(--accent)}
.jobs-simple-hero p{max-width:720px;color:#aeb4bd;font-size:16px;line-height:1.7}
.jobs-simple-search{display:flex;align-items:center;gap:12px;max-width:760px;margin-top:26px;padding:0 17px;border:1px solid #292c33;background:#101216;border-radius:14px}.jobs-simple-search span{font-size:24px;color:#777}.jobs-simple-search input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:17px 0;font:inherit}
.jobs-simple-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.jobs-simple-meta span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#969da7;font-size:11px;background:rgba(255,255,255,.02)}.jobs-simple-meta span:first-child{color:#fff;border-color:rgba(255,59,48,.35)}
.jobs-simple-board{padding-top:42px;padding-bottom:46px}.jobs-simple-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.jobs-simple-heading h2{font:600 30px "Space Grotesk";margin:4px 0 5px}.jobs-simple-heading p{color:#858c96;font-size:13px;margin:0}.jobs-simple-badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:#9ea5ae;font-size:11px;white-space:nowrap}.jobs-simple-badge span{width:7px;height:7px;border-radius:50%;background:#65c466;box-shadow:0 0 10px rgba(101,196,102,.5)}
.job-simple-list{display:grid;gap:13px}.job-simple-card{border:1px solid var(--line);background:linear-gradient(145deg,#111317,#0d0e11);border-radius:15px;padding:20px;transition:border-color .18s ease,transform .18s ease}.job-simple-card:hover{border-color:#3c4048;transform:translateY(-2px)}.job-simple-card-top{display:flex;justify-content:space-between;gap:20px}.job-simple-company{font:600 13px "Space Grotesk";color:#e2e4e8}.job-simple-card h3{font:600 21px/1.3 "Space Grotesk";margin:7px 0 0}.job-simple-card time{font-size:10px;color:#737a84;white-space:nowrap}.job-simple-facts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;color:#979ea8;font-size:11px}.job-simple-card p{color:#aeb4bd;font-size:13px;line-height:1.7;margin:14px 0}.job-simple-skills{display:flex;flex-wrap:wrap;gap:6px}.job-simple-skills span{font-size:10px;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:#aeb4bd;background:rgba(255,255,255,.025)}.job-simple-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.07);margin-top:17px;padding-top:14px;color:#727985;font-size:10px}.job-simple-actions{display:flex;gap:8px;align-items:center}.job-secondary-btn{padding:8px 11px;border:1px solid #30343b;border-radius:8px;color:#b8bec7;font-size:11px}.job-secondary-btn:hover{color:#fff;border-color:#4a4f58}.job-simple-empty{margin-top:15px;padding:38px;border:1px dashed #2a2d33;border-radius:14px;text-align:center;color:#8b929c}.job-simple-empty strong{color:#d8dbe0}.job-simple-empty p{margin:6px 0 0;font-size:12px}.jobs-daily-note{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding-top:10px;padding-bottom:42px}.jobs-daily-note h2{font:600 27px "Space Grotesk";margin:5px 0 9px}.jobs-daily-note p{max-width:650px;color:#9299a3;font-size:13px;line-height:1.7}.jobs-daily-points{border:1px solid var(--line);border-radius:14px;background:#0f1013;padding:5px}.jobs-daily-points div{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid rgba(255,255,255,.06)}.jobs-daily-points div:last-child{border-bottom:0}.jobs-daily-points b{font:500 11px "DM Mono";color:#ff756d}.jobs-daily-points span{font-size:12px;color:#b7bdc5}.jobs-disclaimer{border-top:1px solid var(--line);padding-top:20px;padding-bottom:70px;display:flex;gap:16px;align-items:flex-start}.jobs-disclaimer span{font:500 9px "DM Mono";letter-spacing:.14em;color:#777e88;white-space:nowrap}.jobs-disclaimer p{margin:0;color:#666d77;font-size:11px;line-height:1.6;max-width:760px}
@media(max-width:700px){.jobs-simple-hero{padding:52px 0 38px}.jobs-simple-heading{display:block}.jobs-simple-badge{width:max-content;margin-top:15px}.job-simple-card{padding:16px}.job-simple-card-top{display:block}.job-simple-card time{display:block;margin-top:7px}.job-simple-bottom{align-items:flex-start;flex-direction:column}.job-simple-actions{width:100%}.job-simple-actions a{flex:1;text-align:center}.jobs-daily-note{grid-template-columns:1fr}.jobs-disclaimer{display:block}.jobs-disclaimer p{margin-top:8px}}

/* =========================================================
   JOBS v1.2 — clearer hierarchy + job detail refresh
   ========================================================= */
.job-simple-card{background:linear-gradient(145deg,#12151a,#0d0f13);border-color:#252a32}
.job-simple-card:hover{border-color:rgba(255,120,70,.55);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.job-simple-company{color:#ffb35c!important;letter-spacing:.01em}
.job-simple-card h3{color:#f4f6f8!important}
.job-simple-card p{color:#c3c9d1!important}
.job-simple-facts{color:#aeb6c1!important}
.job-simple-facts span{color:#b7bec8}
.job-simple-skills span{color:#c4cad2;border-color:#2a3038;background:#14171c}
.job-simple-bottom{color:#89929e;border-top-color:#252a32}
.job-simple-actions{margin-left:auto}
.job-view-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px!important;border:1px solid rgba(255,120,70,.45)!important;border-radius:9px!important;background:rgba(255,92,54,.08);color:#ffd4bf!important;font-weight:600}
.job-view-btn:hover{background:rgba(255,92,54,.16);border-color:#ff795c!important;color:#fff!important}

.job-detail-hero{background:radial-gradient(circle at 82% 18%,rgba(255,92,54,.16),transparent 32%),linear-gradient(180deg,#0c0f13 0%,#090b0e 100%);border-bottom-color:#242932}
.job-detail-hero h1{color:#f5f7fa!important}
.job-company-large{color:#ffb35c!important}
.hero-facts span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #2a3038;border-radius:999px;background:#12151a;color:#c4cad2!important}
.job-detail-layout{align-items:start}
.job-detail-card{background:#111419;border-color:#282e37;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.job-action-row{justify-content:space-between}
.job-action-row>span{color:#8d96a2}
.job-detail-card .detail-section h2{color:#f0f3f6!important}
.job-detail-card .detail-section p,.job-detail-card .detail-section li{color:#c2c8d0;font-size:14px;line-height:1.8}
.job-detail-card .detail-section ul,.job-detail-card .detail-section ol{padding-left:22px}
.job-detail-card .detail-section li{margin:5px 0}
.skill-row.large{display:flex;flex-wrap:wrap;gap:8px}
.skill-row.large span{padding:8px 11px;border:1px solid #303741;border-radius:8px;background:#15181e;color:#d9dee5;font-size:12px}
.job-sidebar .career-links{border-color:#282e37;background:#111419}
.job-sidebar .career-links h3{color:#f0f3f6}
.job-sidebar .career-links a{color:#b8c0ca}
.job-sidebar .career-links a:hover{color:#ffb35c}
.job-detail-card .detail-section:first-of-type{padding-top:25px}
.source-line a{color:#ffb35c;text-decoration:underline;text-underline-offset:3px}

@media(max-width:700px){
  .job-simple-actions{width:auto;margin-left:0}
  .job-view-btn{width:100%}
  .job-detail-hero h1{font-size:36px}
  .hero-facts span{font-size:11px}
}
.job-rich-content{color:#c5cbd3;font-size:14px;line-height:1.8}
.job-rich-content h2,.job-rich-content h3,.job-rich-content h4{color:#f0f3f6;margin:24px 0 10px;font-family:"Space Grotesk"}
.job-rich-content h2{font-size:23px}.job-rich-content h3{font-size:18px}.job-rich-content h4{font-size:15px}
.job-rich-content p{color:#c5cbd3;margin:0 0 14px}
.job-rich-content ul,.job-rich-content ol{padding-left:22px;margin:10px 0 18px}
.job-rich-content li{margin:6px 0;color:#c5cbd3}
.job-rich-content strong{color:#f1f3f5}
.job-rich-content a{color:#ffb35c;text-decoration:underline;text-underline-offset:3px}
.detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.detail-facts span{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid #292f38;border-radius:10px;background:#15181e;color:#d1d6dd;font-size:12px}
.detail-facts b{font:500 9px "DM Mono";letter-spacing:.08em;text-transform:uppercase;color:#8d96a2}
@media(max-width:560px){.detail-facts{grid-template-columns:1fr}}

/* =========================================================
   ABOUT PAGE v1 — dedicated About screen
   ========================================================= */
.dex-about-page{background:#090a0f;color:#f4f5f7;min-height:70vh}
.dex-about-hero{padding:105px 0 90px;border-bottom:1px solid #242730;background:radial-gradient(circle at 78% 12%,rgba(255,90,31,.18),transparent 31%),radial-gradient(circle at 15% 70%,rgba(71,109,255,.09),transparent 30%),#090a0f}
.dex-about-kicker,.dex-about-eyebrow{font:500 10px/1.4 "DM Mono",monospace;letter-spacing:.16em;color:#ff8b62}
.dex-about-hero h1{font:700 clamp(54px,8vw,94px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.055em;margin:22px 0 24px;max-width:950px}
.dex-about-hero h1 span{color:#ff6b3d}
.dex-about-lead{max-width:720px;color:#aeb5c0;font-size:18px;line-height:1.75;margin:0}
.dex-about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.dex-about-section{padding:92px 0;border-bottom:1px solid #20232b}
.dex-about-intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.dex-about-section h2{font:600 clamp(35px,4.5vw,54px)/1.06 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin:14px 0 0}
.dex-about-intro-grid p,.dex-about-path-copy p{color:#aeb5c0;font-size:16px;line-height:1.8;margin:0 0 18px}
.dex-about-dark{background:#0d0f14}
.dex-about-section-head{max-width:760px;margin-bottom:38px}
.dex-about-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dex-about-feature-grid article{padding:25px;border:1px solid #282c35;border-radius:15px;background:linear-gradient(145deg,#12151b,#0d0f13);min-height:245px;display:flex;flex-direction:column}
.dex-about-number{font:500 10px "DM Mono",monospace;color:#ff7950;letter-spacing:.1em}
.dex-about-feature-grid h3{font:600 23px "Space Grotesk",sans-serif;margin:28px 0 9px}
.dex-about-feature-grid p{color:#9da5b0;font-size:13px;line-height:1.7;margin:0}
.dex-about-feature-grid a{margin-top:auto;padding-top:20px;color:#ff9a76;font-size:12px;font-weight:600;text-decoration:none}
.dex-about-feature-grid a:hover{color:#fff}
.dex-about-path{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.dex-about-steps{border:1px solid #282c35;border-radius:15px;background:#0d0f13;overflow:hidden}
.dex-about-steps div{display:flex;align-items:center;gap:20px;padding:20px 22px;border-bottom:1px solid #252932}
.dex-about-steps div:last-child{border-bottom:0}
.dex-about-steps b{font:500 11px "DM Mono",monospace;color:#ff7950;min-width:25px}
.dex-about-steps span{font:600 14px "Space Grotesk",sans-serif;color:#e4e7eb}
.dex-about-cta{border-bottom:0;padding-top:55px;padding-bottom:90px}
.dex-about-cta-card{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:38px;border:1px solid #333640;border-radius:18px;background:linear-gradient(110deg,#14171d,#0d1014)}
.dex-about-cta-card h2{font-size:35px;margin-top:10px}
.dex-about-cta-card p{color:#9ea6b0;margin:10px 0 0}
.dex-about-page .dex-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 17px;border-radius:10px;text-decoration:none;font:600 13px "Space Grotesk",sans-serif;white-space:nowrap}
.dex-about-page .dex-btn-primary{background:linear-gradient(100deg,#ff5a1f,#ff9d45);color:#101116;box-shadow:0 12px 30px rgba(255,90,31,.18)}
.dex-about-page .dex-btn-secondary{border:1px solid #353943;color:#d5d9df;background:#111319}
.dex-about-page .dex-btn-secondary:hover{border-color:#5a5e68;color:#fff}
@media(max-width:950px){.dex-about-feature-grid{grid-template-columns:repeat(2,1fr)}.dex-about-intro-grid,.dex-about-path{grid-template-columns:1fr;gap:42px}.dex-about-hero{padding-top:75px}}
@media(max-width:600px){.dex-about-hero{padding:58px 0 62px}.dex-about-hero h1{font-size:51px}.dex-about-lead{font-size:16px}.dex-about-section{padding:65px 0}.dex-about-feature-grid{grid-template-columns:1fr}.dex-about-feature-grid article{min-height:210px}.dex-about-cta-card{display:block;padding:25px}.dex-about-cta-card h2{font-size:31px}.dex-about-cta-card .dex-btn{margin-top:24px;width:100%;box-sizing:border-box}.dex-about-actions{flex-direction:column;align-items:stretch}.dex-about-actions .dex-btn{width:100%;box-sizing:border-box}}

/* Python Fundamentals — reading mode
 * Layout, content, spacing and interactions intentionally remain unchanged.
 * This only changes the page palette for comfortable long-form reading.
 */
.dex-python-fundamentals{
  --py-bg:#ffffff;
  --py-surface:#f8fafc;
  --py-surface-2:#f1f5f9;
  --py-text:#172033;
  --py-heading:#10203d;
  --py-muted:#4b5a73;
  --py-soft:#6b7890;
  --py-line:#dbe2ec;
  --py-accent:#1769e0;
  --py-accent-soft:#eaf2ff;
  --py-gold:#d49300;
  background:var(--py-bg);
  color:var(--py-text);
}
.dex-python-fundamentals .python-fund-layout{background:var(--py-bg)}
.dex-python-fundamentals .python-fund-side-head{border-color:var(--py-line)}
.dex-python-fundamentals .python-fund-side-head .eyebrow{color:#1769e0}
.dex-python-fundamentals .python-fund-side-head strong{color:var(--py-muted)}
.dex-python-fundamentals .python-fund-nav a{color:#43516a}
.dex-python-fundamentals .python-fund-nav a span{color:#718099}
.dex-python-fundamentals .python-fund-nav a:hover{color:#172033;background:#f5f8fc;border-color:#d7e0eb}
.dex-python-fundamentals .python-fund-nav a.is-active{color:#12213b;background:var(--py-accent-soft);border-color:#9fc1f7}
.dex-python-fundamentals .python-fund-nav a.is-active span{color:var(--py-accent)}
.dex-python-fundamentals .python-back{color:#1769e0}
.dex-python-fundamentals .python-back:hover{color:#0d56be}
.dex-python-fundamentals .python-fund-kicker{color:#65738b}
.dex-python-fundamentals .python-fund-kicker span{color:var(--py-gold)}
.dex-python-fundamentals .python-fund-main h1,
.dex-python-fundamentals .python-fund-main h2,
.dex-python-fundamentals .py-task-title{color:var(--py-heading)}
.dex-python-fundamentals .python-fund-main h1{font-weight:700}
.dex-python-fundamentals .python-fund-description,
.dex-python-fundamentals .py-exercise>p,
.dex-python-fundamentals .py-task-panel>p{color:var(--py-muted)}
.dex-python-fundamentals .py-exercise-kicker{color:#d49300}
.dex-python-fundamentals .py-code-wrap{
  background:#f8fafc;
  border-color:var(--py-line);
  box-shadow:0 1px 2px rgba(16,32,61,.03);
}
.dex-python-fundamentals .py-code-head{
  border-color:var(--py-line);
  color:#6b7890;
}
.dex-python-fundamentals .py-code-head button{
  border-color:#cbd5e1;
  background:#fff;
  color:#243653;
}
.dex-python-fundamentals .py-code-head button:hover{border-color:#1769e0;color:#1769e0}
.dex-python-fundamentals .py-code-wrap pre{color:#172033}
.dex-python-fundamentals .py-hl-keyword{color:#a14b00}
.dex-python-fundamentals .py-hl-string{color:#16803c}
.dex-python-fundamentals .py-hl-number{color:#7a43c6}
.dex-python-fundamentals .py-hl-function{color:#075fc7}
.dex-python-fundamentals .py-hl-comment{color:#78859a}
.dex-python-fundamentals .py-taskbar button{
  color:#596981;
  border-color:#d5dee9;
}
.dex-python-fundamentals .py-taskbar button:hover{color:#172033;border-color:#9db0ca;background:#f7faff}
.dex-python-fundamentals .py-taskbar button.is-active{
  color:#17345f;
  border-color:#8db5ef;
  background:#edf4ff;
}
.dex-python-fundamentals .py-editor-wrap{
  background:#f8fafc;
  border-color:#cfd9e6;
}
.dex-python-fundamentals .py-editor-wrap textarea{
  color:#172033;
  background:#fff;
}
.dex-python-fundamentals .py-output{
  background:#f8fafc;
  border-color:#d5dee9;
  color:#33435d;
}
.dex-python-fundamentals .py-actions .btn:not(.primary){
  background:#fff;
  border-color:#cfd9e6;
  color:#243653;
}
.dex-python-fundamentals .py-actions .btn:not(.primary):hover{border-color:#1769e0;color:#1769e0}
.dex-python-fundamentals .py-actions span{color:#65738b}
.dex-python-fundamentals .py-actions span.is-success{color:#16803c}
.dex-python-fundamentals .py-actions span.is-error{color:#c43d32}
.dex-python-fundamentals .py-lesson-nav{border-color:var(--py-line)}
.dex-python-fundamentals .py-lesson-nav button{color:#53637c}
.dex-python-fundamentals .py-lesson-nav button:hover{color:#1769e0}

@media(max-width:720px){
  .dex-python-fundamentals .python-fund-sidebar{background:var(--py-bg)}
}

/* Python Fundamentals — compiler/workbench presentation */
.dex-python-fundamentals .py-problem-card{
  display:flex;align-items:center;gap:16px;margin:24px 0;border:1px solid #c9defa;
  background:linear-gradient(90deg,#f4f8ff,#fbfdff);border-radius:10px;padding:18px 20px;
}
.dex-python-fundamentals .py-problem-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e2efff;color:#1769e0;font-size:24px;font-weight:700;flex:none}
.dex-python-fundamentals .py-problem-card strong{display:block;color:#075fc7;font-size:17px;margin-bottom:4px}
.dex-python-fundamentals .py-problem-card p{margin:0;color:#53637c;font-size:15px;line-height:1.6}
.dex-python-fundamentals .py-workbench{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.95fr);gap:18px;margin-top:24px}
.dex-python-fundamentals .py-pane{min-width:0;border:1px solid #cfd9e6;border-radius:10px;overflow:hidden;background:#171d27;box-shadow:0 4px 14px rgba(16,32,61,.07)}
.dex-python-fundamentals .py-pane-head{height:56px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dbe2ec;color:#172033}
.dex-python-fundamentals .py-pane-head>div{display:flex;align-items:center;gap:12px}
.dex-python-fundamentals .py-pane-head strong{font-size:16px}
.dex-python-fundamentals .py-pane-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#eef4ff;color:#1769e0;font-size:18px}
.dex-python-fundamentals .py-terminal-icon{background:#eaf0fb;color:#28476f;font:700 14px/1 ui-monospace,monospace}
.dex-python-fundamentals .py-pane-action{border:0;background:transparent;color:#53637c;font:600 13px/1.2 inherit;cursor:pointer;padding:7px 4px}
.dex-python-fundamentals .py-pane-action:hover{color:#1769e0}
.dex-python-fundamentals .py-editor-wrap{height:290px;min-height:290px;position:relative;border:0;border-radius:0;background:#171d27;overflow:hidden;padding-left:48px}
.dex-python-fundamentals .py-editor-wrap .py-editor-highlight,
.dex-python-fundamentals .py-editor-wrap #pyExerciseEditor{position:absolute;inset:0 0 0 48px;width:calc(100% - 48px);height:100%;box-sizing:border-box;margin:0;padding:16px 18px;font:14px/1.8 "DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;white-space:pre;overflow:auto;word-wrap:normal}
.dex-python-fundamentals .py-editor-wrap .py-editor-highlight{z-index:1;pointer-events:none;color:#dce2ea;background:transparent;border:0;min-width:100%;min-height:100%}
.dex-python-fundamentals .py-editor-wrap #pyExerciseEditor{z-index:2;display:block;resize:none;border:0;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#fff}
.dex-python-fundamentals .py-editor-wrap:focus-within{box-shadow:none}
.dex-python-fundamentals .py-line-numbers{position:absolute;z-index:3;left:0;top:0;bottom:0;width:48px;padding:16px 8px 16px 0;box-sizing:border-box;text-align:right;background:#141a23;color:#718099;font:14px/1.8 "DM Mono",ui-monospace,monospace;user-select:none;pointer-events:none}
.dex-python-fundamentals .py-output-pane .py-output{height:290px;min-height:290px;box-sizing:border-box;margin:0;border:0;border-radius:0;background:#171d27;color:#dce2ea;padding:16px 18px;font:13px/1.8 "DM Mono",ui-monospace,monospace;white-space:pre-wrap;overflow:auto}
.dex-python-fundamentals .py-actions{margin:18px 0 16px;gap:12px}
.dex-python-fundamentals .py-actions .btn{min-height:48px;padding:0 20px;border-radius:9px;font-weight:700;background:#fff;border-color:#cfd9e6;color:#243653}
.dex-python-fundamentals .py-actions .btn.primary{background:#1769e0;border-color:#1769e0;color:#fff;box-shadow:0 5px 14px rgba(23,105,224,.18)}
.dex-python-fundamentals .py-actions .btn.primary:hover{background:#0d5cc9;border-color:#0d5cc9}
.dex-python-fundamentals .py-hint-card{display:flex;align-items:center;gap:14px;border:1px solid #9edfd0;background:#f1fcf8;border-radius:10px;padding:15px 18px;margin-top:8px}
.dex-python-fundamentals .py-hint-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dff7ef;flex:none}
.dex-python-fundamentals .py-hint-card strong{display:block;color:#175e59;margin-bottom:3px}
.dex-python-fundamentals .py-hint-card p{margin:0;color:#496d6a;font-size:14px}
.dex-python-fundamentals .py-hint-card code{font-family:"DM Mono",monospace;color:#245b57}
@media(max-width:900px){.dex-python-fundamentals .py-workbench{grid-template-columns:1fr}.dex-python-fundamentals .py-output-pane .py-output,.dex-python-fundamentals .py-editor-wrap{height:260px;min-height:260px}}
@media(max-width:720px){.dex-python-fundamentals .py-problem-card{align-items:flex-start}.dex-python-fundamentals .py-actions .btn{flex:1 1 auto}.dex-python-fundamentals .py-editor-wrap{height:240px;min-height:240px}.dex-python-fundamentals .py-output-pane .py-output{height:220px;min-height:220px}.dex-python-fundamentals .py-editor-wrap .py-editor-highlight,.dex-python-fundamentals .py-editor-wrap #pyExerciseEditor{font-size:13px;line-height:1.75}}

/* SQL Engineering reading mode + compiler workspace */
.dex-sql-learn{background:#fff;color:#17243b}
.dex-sql-learn .sql-direct-container{width:min(1480px,calc(100% - 64px))}
.dex-sql-learn .sql-direct-sidebar{background:#f7f9fc;border:1px solid #e2e8f0;box-shadow:0 8px 28px rgba(15,35,65,.05)}
.dex-sql-learn .sql-sidebar-kicker{color:#1769d2}
.dex-sql-learn .sql-sidebar-progress,.dex-sql-learn .sql-sidebar-number{color:#718096}
.dex-sql-learn .sql-sidebar-progress-track{background:#e8edf4}
.dex-sql-learn .sql-sidebar-progress-track .sql-progress-fill{background:#1769d2}
.dex-sql-learn .sql-direct-nav a{color:#53647d}
.dex-sql-learn .sql-direct-nav a:hover{background:#edf4ff;color:#17345d;border-color:#d5e5fb}
.dex-sql-learn .sql-direct-nav a.active{background:#eaf3ff;border-color:#8ebaff;color:#102a52}
.dex-sql-learn .sql-direct-nav a.active .sql-sidebar-number{color:#1769d2}
.dex-sql-learn .sql-direct-layout .sql-inline-lesson-head{border-bottom:1px solid #e6ebf2}
.dex-sql-learn .sql-lesson-meta{color:#5d718e!important}
.dex-sql-learn .sql-direct-layout .sql-inline-lesson-head h1{color:#172b4d!important;font-size:48px;letter-spacing:-.035em}
.dex-sql-learn .sql-direct-layout .sql-description-copy{color:#405775}
.dex-sql-learn .sql-direct-layout .sql-content-row{border-color:#e6ebf2}
.dex-sql-learn .sql-direct-layout .sql-eyebrow{color:#e09a00}
.dex-sql-learn .sql-direct-layout .sql-inline-code{color:#233957;background:#f7f9fc;border:1px solid #dbe4ef;border-radius:10px;padding:18px}
.dex-sql-learn .sql-direct-layout .sql-code-wrap{background:#f7f9fc;border:1px solid #dbe4ef;border-radius:10px;padding:18px 84px 18px 18px}
.dex-sql-learn .sql-direct-layout .sql-code-wrap .sql-inline-code{border:0;padding:0;background:transparent}
.dex-sql-learn .sql-direct-layout .sql-code-copy{right:12px;top:12px;background:#fff;color:#29415f;border-color:#cbd8e8}
.dex-sql-learn .sql-direct-layout .sql-code-copy:hover{border-color:#1769d2;color:#1769d2}
.dex-sql-learn .sql-direct-layout .sql-interactive-exercise>h2{color:#172b4d}
.dex-sql-learn .sql-direct-layout .sql-exercise-intro{color:#405775}
.dex-sql-learn .sql-data-panel,.dex-sql-learn .sql-task-panel{background:#fff;border-color:#dce5ef;box-shadow:0 5px 18px rgba(24,53,88,.04)}
.dex-sql-learn .sql-table-wrap th,.dex-sql-learn .sql-result-wrap th{background:#edf4fc;color:#17345d}
.dex-sql-learn .sql-table-wrap th,.dex-sql-learn .sql-table-wrap td,.dex-sql-learn .sql-result-wrap th,.dex-sql-learn .sql-result-wrap td{border-color:#e4eaf1}
.dex-sql-learn .sql-table-wrap td,.dex-sql-learn .sql-result-wrap td{color:#405775}
.dex-sql-learn .sql-table-wrap tbody tr:nth-child(even),.dex-sql-learn .sql-result-wrap tbody tr:nth-child(even){background:#f8fafc}
.dex-sql-learn .sql-task-head{border-color:#e2e8f0}
.dex-sql-learn .sql-task-head strong{color:#172b4d}
.dex-sql-learn .sql-task-head span{color:#1769d2}
.dex-sql-learn .sql-task-item{color:#53647d}
.dex-sql-learn .sql-task-item:hover{background:#f3f7fc;color:#17345d}
.dex-sql-learn .sql-task-item.active{background:#eaf3ff;border-color:#9fc5f7;color:#17345d}
.dex-sql-learn .sql-task-item.active .sql-task-index{border-color:#1769d2;color:#1769d2}
.dex-sql-learn .sql-task-copy small,.dex-sql-learn .sql-task-help{color:#718096}
.dex-sql-learn .sql-task-item.active .sql-task-copy small{color:#53647d}
.dex-sql-learn .sql-task-help{border-color:#e2e8f0}
.dex-sql-learn .sql-task-help strong{color:#d68e00}
.dex-sql-learn .sql-compiler-panel{background:transparent;border:0;overflow:visible;margin-top:22px}
.dex-sql-learn .sql-compiler-head{background:#fff;border:1px solid #d9e3ee;border-radius:12px 12px 0 0;padding:16px 18px}
.dex-sql-learn .sql-compiler-head>div:first-child>span{color:#64758c}
.dex-sql-learn .sql-compiler-head .sql-panel-label{color:#1769d2}
.dex-sql-learn .sql-compiler-actions{display:none}
.dex-sql-learn .sql-compiler-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);gap:18px;margin-top:18px}
.dex-sql-learn .sql-code-pane,.dex-sql-learn .sql-output-pane{min-width:0;border:1px solid #d6e0eb;border-radius:12px;overflow:hidden;background:#17202d;box-shadow:0 8px 24px rgba(17,39,68,.08)}
.dex-sql-learn .sql-code-pane-head{height:54px;box-sizing:border-box;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dbe4ee;color:#172b4d}
.dex-sql-learn .sql-code-pane-head strong{display:flex;align-items:center;gap:9px;font-size:15px}
.dex-sql-learn .sql-code-icon,.dex-sql-learn .sql-output-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#eaf3ff;color:#1769d2;font:700 10px 'DM Mono',monospace}
.dex-sql-learn .sql-output-icon{background:#e9eef6;color:#29415f;font-size:13px}
.dex-sql-learn .sql-pane-reset,.dex-sql-learn .sql-pane-clear{border:0;background:transparent;color:#526780;cursor:pointer;font:600 12px 'DM Mono',monospace}
.dex-sql-learn .sql-pane-reset:hover,.dex-sql-learn .sql-pane-clear:hover{color:#1769d2}
.dex-sql-learn .sql-exercise-code-stage{min-height:320px;background:#17202d;border-bottom:0}
.dex-sql-learn .sql-exercise-code-stage .sql-exercise-highlight,.dex-sql-learn .sql-exercise-code-stage .sql-exercise-editor{min-height:320px;padding:18px 18px 18px 48px;font-size:14px;line-height:1.75}
.dex-sql-learn .sql-exercise-code-stage .sql-exercise-highlight{color:#d9e3ef}
.dex-sql-learn .sql-exercise-code-stage .sql-exercise-editor{color:transparent;-webkit-text-fill-color:transparent;caret-color:#fff}
.dex-sql-learn .sql-exercise-code-stage.is-focused{box-shadow:inset 0 0 0 2px rgba(65,139,230,.55)}
.dex-sql-learn .sql-code-pane .sql-tok-keyword{color:#72b7ff}.dex-sql-learn .sql-code-pane .sql-tok-function{color:#8bd9c7}.dex-sql-learn .sql-code-pane .sql-tok-string{color:#b9e58b}.dex-sql-learn .sql-code-pane .sql-tok-number{color:#d4b3ff}.dex-sql-learn .sql-code-pane .sql-tok-comment{color:#78889c}.dex-sql-learn .sql-code-pane .sql-tok-operator{color:#f3c77b}
.dex-sql-learn .sql-output-body{min-height:320px;background:#17202d;color:#c6d2df;padding:18px;box-sizing:border-box}
.dex-sql-learn .sql-output-placeholder{font:13px/1.6 'DM Mono',monospace;color:#9aaabd}
.dex-sql-learn .sql-output-body .sql-result-wrap{border:0;padding:0;background:transparent}
.dex-sql-learn .sql-output-body .sql-panel-label{color:#7da8d7;margin-bottom:12px}
.dex-sql-learn .sql-output-body .sql-result-wrap table{background:#202b39;color:#d8e2ec}
.dex-sql-learn .sql-output-body .sql-result-wrap th{position:static;background:#29384a;color:#f0f5fa}
.dex-sql-learn .sql-output-body .sql-result-wrap td{color:#c5d0dc}
.dex-sql-learn .sql-output-body .sql-empty-result{border-color:#405064;color:#a9b6c5}
.dex-sql-learn .sql-compiler-status{margin-top:0;padding:11px 16px;background:#f6f8fb;border:1px solid #d9e3ee;border-top:0;color:#64758c;border-radius:0 0 12px 12px}
.dex-sql-learn .sql-compiler-status.success{color:#15805d}.dex-sql-learn .sql-compiler-status.error{color:#c43d3d}.dex-sql-learn .sql-compiler-status.loading{color:#b36b00}
.dex-sql-learn .sql-exercise-footer{background:#fff;border-color:#dce5ef}.dex-sql-learn .sql-exercise-footer span{color:#718096}.dex-sql-learn .sql-finish-tasks{background:#1769d2;border-color:#1769d2;color:#fff}.dex-sql-learn .sql-finish-tasks:not(:disabled):hover{background:#0f56b2;color:#fff}
.dex-sql-learn .sql-lesson-nav button{border-color:#d5e0ec;background:#fff;color:#24415f}
@media(max-width:900px){.dex-sql-learn .sql-compiler-workspace{grid-template-columns:1fr}.dex-sql-learn .sql-output-pane{min-height:260px}}
@media(max-width:560px){.dex-sql-learn .sql-direct-container{width:min(100% - 28px,1480px)}.dex-sql-learn .sql-direct-layout .sql-inline-lesson-head h1{font-size:36px}.dex-sql-learn .sql-exercise-code-stage{min-height:240px}.dex-sql-learn .sql-exercise-code-stage .sql-exercise-highlight,.dex-sql-learn .sql-exercise-code-stage .sql-exercise-editor{min-height:240px;padding-left:38px;font-size:13px}.dex-sql-learn .sql-output-body{min-height:220px}}

/* SQL playground output polish */
.dex-sql-learn .sql-code-pane,.dex-sql-learn .sql-output-pane{background:#fff;border:1px solid #d7e2ef;border-radius:14px;box-shadow:0 10px 30px rgba(24,52,88,.08)}
.dex-sql-learn .sql-output-pane{overflow:hidden}
.dex-sql-learn .sql-output-body{min-height:320px;background:#fff;color:#243b5a;padding:14px 16px 16px}
.dex-sql-learn .sql-output-placeholder{min-height:260px;display:flex;align-items:flex-start;padding:12px 4px;color:#718096;background:#fff}
.dex-sql-learn .sql-output-feedback{display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:14px;border:1px solid #b9ebd2;border-radius:10px;background:#f0fff7;color:#147a4b;font-size:13px}
.dex-sql-learn .sql-output-feedback.is-error{border-color:#f2c4c4;background:#fff5f5;color:#b63b3b}
.dex-sql-learn .sql-output-feedback.is-loading{border-color:#f1d7a8;background:#fffaf0;color:#9a6400}
.dex-sql-learn .sql-feedback-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#1da463;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
.dex-sql-learn .sql-output-feedback.is-error .sql-feedback-icon{background:#d84c4c}
.dex-sql-learn .sql-output-feedback.is-loading .sql-feedback-icon{background:#d99826}
.dex-sql-learn .sql-output-count{margin-left:auto;color:#3aab78;font-weight:600;white-space:nowrap}
.dex-sql-learn .sql-output-body .sql-result-wrap{border:0;padding:0;background:#fff;overflow:auto}
.dex-sql-learn .sql-output-body .sql-panel-label{color:#71839a;margin:0 0 8px;font-size:11px;letter-spacing:.08em}
.dex-sql-learn .sql-output-body .sql-result-wrap table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;color:#233b5c;border:1px solid #dce6f0;border-radius:10px;overflow:hidden;font-size:13px}
.dex-sql-learn .sql-output-body .sql-result-wrap th{position:static;background:#eef4fb;color:#294565;border-bottom:1px solid #d5e0ec;font-weight:700}
.dex-sql-learn .sql-output-body .sql-result-wrap td{color:#425b78;background:#fff;border-bottom:1px solid #e5ebf2}
.dex-sql-learn .sql-output-body .sql-result-wrap tbody tr:last-child td{border-bottom:0}
.dex-sql-learn .sql-output-body .sql-result-wrap tbody tr:hover td{background:#f8fbff}
.dex-sql-learn .sql-output-body .sql-result-wrap th,.dex-sql-learn .sql-output-body .sql-result-wrap td{padding:10px 12px}
.dex-sql-learn .sql-output-body .sql-result-wrap .sql-row-number{width:38px;color:#7b8ca2;text-align:center;font-variant-numeric:tabular-nums}
.dex-sql-learn .sql-output-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 14px;border:1px solid #dce8f5;border-radius:10px;background:#f6faff;color:#66809e;font-size:12px}
.dex-sql-learn .sql-output-meta button{border:0;background:transparent;color:#1769d2;font:600 12px 'DM Mono',monospace;cursor:pointer}
.dex-sql-learn .sql-output-meta button:hover{text-decoration:underline}
.dex-sql-learn .sql-code-pane-head{height:58px;padding:0 18px}
.dex-sql-learn .sql-code-pane-head strong{font-size:16px}
.dex-sql-learn .sql-code-icon{width:32px;height:32px;background:#eaf3ff;color:#1769d2}
.dex-sql-learn .sql-output-icon{width:32px;height:32px;background:#e9eef6;color:#29415f}
.dex-sql-learn .sql-pane-reset,.dex-sql-learn .sql-pane-clear{font-size:12px;color:#526780}
.dex-sql-learn .sql-compiler-status{margin-top:14px;border:0;border-radius:8px;background:transparent;padding:0 2px;color:#718096}
@media(max-width:900px){.dex-sql-learn .sql-output-body{min-height:260px}.dex-sql-learn .sql-output-placeholder{min-height:180px}}

/* SQL playground action bar */
.dex-sql-learn .sql-compiler-header-actions{display:flex;align-items:center}
.dex-sql-learn .sql-compiler-ready{font:600 11px 'DM Mono',monospace;letter-spacing:.04em;color:#71839a;padding:8px 11px;border:1px solid #dce6f0;border-radius:8px;background:#f6f9fc}
.dex-sql-learn .sql-compiler-runbar{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-btn{min-height:48px;padding:0 22px;border:1px solid #d5e0ec;border-radius:10px;background:#fff;color:#172b4d;font:700 13px 'DM Mono',monospace;cursor:pointer;box-shadow:0 2px 5px rgba(24,52,88,.04);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(24,52,88,.10);border-color:#b8cce3}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-run{background:#1769d2;border-color:#1769d2;color:#fff;min-width:150px}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-run:hover{background:#0f5cbd;border-color:#0f5cbd}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-check{background:#fff;color:#1769d2;border-color:#c8dbf2;min-width:175px}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-reset{min-width:110px}
.dex-sql-learn .sql-compiler-runbar .sql-compiler-btn span{font-size:15px;margin-right:7px}
@media(max-width:560px){
  .dex-sql-learn .sql-compiler-runbar{display:grid;grid-template-columns:1fr 1fr}
  .dex-sql-learn .sql-compiler-runbar .sql-compiler-btn{width:100%;min-width:0}
  .dex-sql-learn .sql-compiler-runbar .sql-compiler-run{grid-column:span 2}
}

/* =========================================================
   TRUST / LEGAL PAGES
   ========================================================= */
.dex-legal-page{background:#f8f9fb;color:#101828;min-height:70vh}.dex-legal-hero{background:#090a0f;color:#fff;padding:90px 0 70px;border-bottom:1px solid #252731}.dex-legal-eyebrow{display:inline-block;font:700 10px/1.2 "DM Mono",monospace;letter-spacing:.16em;color:#ff8a5e}.dex-legal-hero h1{font:600 56px/1.05 "Space Grotesk",Inter,sans-serif;letter-spacing:-.04em;margin:18px 0 16px}.dex-legal-lead{max-width:720px;color:#b8bcc7;font-size:17px;line-height:1.75;margin:0}.dex-legal-updated{font:11px "DM Mono",monospace;color:#777a86;margin-top:24px}.dex-legal-content{padding:70px 0 100px}.dex-legal-layout{max-width:1040px}.dex-legal-card{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:42px;box-shadow:0 12px 35px rgba(16,24,40,.04)}.dex-legal-card h2{font:600 24px/1.25 "Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;margin:0 0 13px}.dex-legal-card h2:not(:first-child){margin-top:36px}.dex-legal-card p,.dex-legal-card li{font-size:15px;line-height:1.8;color:#475467}.dex-legal-card ul{padding-left:22px}.dex-legal-card a{color:#d84d1b;text-decoration:underline;text-underline-offset:3px}.dex-contact-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:22px}.dex-contact-aside{align-self:start}.dex-contact-form{display:grid;gap:10px;margin-top:28px}.dex-contact-form label{font-size:13px;font-weight:700;color:#344054;margin-top:8px}.dex-contact-form input,.dex-contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #d0d5dd;border-radius:10px;background:#fff;padding:12px 13px;font:14px/1.5 Inter,sans-serif;color:#101828;outline:none}.dex-contact-form input:focus,.dex-contact-form textarea:focus{border-color:#ff5a1f;box-shadow:0 0 0 3px rgba(255,90,31,.1)}.dex-contact-form textarea{resize:vertical;min-height:160px}.dex-contact-form .dex-btn{justify-self:start;border:0;cursor:pointer;margin-top:12px}.dex-form-notice{border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;margin-top:20px}.dex-form-notice.success{background:#ecfdf3;border:1px solid #abefc6;color:#067647}.dex-form-notice.error{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
@media(max-width:760px){.dex-legal-hero{padding:65px 0 50px}.dex-legal-hero h1{font-size:42px}.dex-legal-lead{font-size:15px}.dex-legal-content{padding:45px 0 70px}.dex-legal-card{padding:27px 21px}.dex-contact-layout{grid-template-columns:1fr}.dex-legal-card h2{font-size:21px}}

/* SQL Engineering mobile viewport fix — container alignment only */
@media (max-width: 720px) {
  .dex-sql-learn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .dex-sql-learn .sql-direct-container {
    width: calc(100% - 28px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .dex-sql-learn .sql-direct-layout,
  .dex-sql-learn .sql-direct-lesson,
  .dex-sql-learn .sql-lesson-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Keep the horizontally scrolling lesson selector below the mobile header.
     The header itself is sticky, so the selector must use the same vertical
     offset (plus the WordPress admin bar when it is present). */
  .dex-sql-learn .sql-direct-sidebar {
    top: 84px;
    max-height: calc(100vh - 104px);
  }
}

@media (max-width: 720px) {
  body.admin-bar .dex-sql-learn .sql-direct-sidebar {
    top: 114px;
    max-height: calc(100vh - 134px);
  }
}