@import"https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap";:root{color-scheme:light;--paper: oklch(.965 .012 83);--paper-strong: oklch(.99 .006 83);--ink: oklch(.205 .022 248);--muted: oklch(.49 .025 248);--line: oklch(.84 .023 83);--cobalt: oklch(.43 .14 258);--amber: oklch(.72 .16 73);--green: oklch(.58 .12 153);--red: oklch(.58 .16 29);--shadow: 0 18px 50px oklch(.3 .04 83 / .12);--sharp-shadow: 7px 7px 0 oklch(.22 .02 248 / .16);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;font-family:Host Grotesk,ui-sans-serif,system-ui,sans-serif;background:var(--paper);color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,oklch(.86 .018 83 / .45) 1px,transparent 1px),linear-gradient(0deg,oklch(.86 .018 83 / .45) 1px,transparent 1px),radial-gradient(circle at 15% 10%,oklch(.82 .11 73 / .28),transparent 28rem),var(--paper);background-size:32px 32px,32px 32px,auto,auto}button,textarea{font:inherit}button{cursor:pointer}.app-shell{width:min(1760px,100%);margin:0 auto;padding:var(--space-xl)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-md) 0 var(--space-xl)}.topbar h1{margin:0;font-size:clamp(2.2rem,4.2vw,4.7rem);letter-spacing:0;line-height:.86}.tagline{display:block;width:fit-content;margin-top:var(--space-sm);padding:7px 10px;border:1px solid var(--ink);border-radius:999px;background:var(--amber);color:var(--ink);font:700 .78rem/1 Geist Mono,ui-monospace,monospace}.eyebrow{margin:0 0 var(--space-xs);color:var(--cobalt);font:700 .75rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}.workspace{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.62fr) minmax(300px,.92fr);gap:var(--space-lg);align-items:start}.rail,.stage,.inspector{display:grid;gap:var(--space-lg);min-width:0}.stage{grid-template-rows:auto minmax(360px,1fr)}.panel,.editor-panel,.result-panel{border:1px solid var(--line);background:color-mix(in oklch,var(--paper-strong) 88%,transparent);box-shadow:var(--shadow)}.panel,.editor-panel,.result-panel{border-radius:8px;min-width:0}.editor-panel,.result-panel,.graph-panel{overflow:hidden}.compact,.graph-panel,.lessons,.saves,.examples{padding:var(--space-lg)}.panel-header,.panel-title,.topbar__actions,.button-row,.score,.locale-switch{display:flex;align-items:center;gap:var(--space-md)}.locale-switch{min-height:40px;padding:3px 5px;border:1px solid var(--line);border-radius:999px;background:var(--paper-strong)}.locale-switch svg{margin-left:6px;color:var(--cobalt)}.locale-switch button{min-height:30px;border:0;border-radius:999px;padding:0 9px;background:transparent;color:var(--muted);font-weight:700}.locale-switch button.active{background:var(--ink);color:var(--paper-strong)}.panel-header{justify-content:space-between;padding:var(--space-lg) var(--space-lg) 0}.panel-header h2,.panel-title h3{margin:0}.goal{color:var(--muted);max-width:68ch;margin:var(--space-md) var(--space-lg)}.score{min-height:40px;padding:0 var(--space-md);border:1px solid var(--line);border-radius:999px;background:var(--paper-strong)}.score svg{color:var(--amber)}.score span{color:var(--muted);font-size:.88rem}.progress-pill{position:relative;display:grid;place-items:center;width:92px;min-height:40px;overflow:hidden;border:1px solid var(--line);border-radius:999px;background:var(--paper-strong)}.progress-pill span{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;background:color-mix(in oklch,var(--green) 34%,transparent);transition:transform .52s cubic-bezier(.16,1,.3,1)}.progress-pill strong{position:relative;z-index:1;font:700 .82rem/1 Geist Mono,ui-monospace,monospace}.primary-button,.secondary-button,.icon-button{border:1px solid var(--ink);border-radius:8px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);transition:transform .18s ease,background .18s ease,color .18s ease}.primary-button{padding:0 var(--space-lg);color:var(--paper-strong);background:var(--ink);box-shadow:var(--sharp-shadow)}.secondary-button,.icon-button{color:var(--ink);background:var(--paper-strong)}.secondary-button{padding:0 var(--space-lg)}.icon-button{width:40px}.icon-button.small{width:32px;min-height:32px}.primary-button:hover,.secondary-button:hover,.icon-button:hover,.lesson:hover,.example-button:hover,.mini-action:hover,.column-token:hover{transform:translateY(-1px)}.quickstart{background:var(--ink);color:var(--paper-strong);box-shadow:var(--sharp-shadow)}.quickstart .eyebrow{color:var(--amber)}.quickstart ol{display:grid;gap:var(--space-sm);margin:var(--space-md) 0 0;padding:0;list-style:none}.quickstart li{display:grid;grid-template-columns:54px 1fr;gap:var(--space-sm);align-items:center}.quickstart strong{display:grid;place-items:center;min-height:32px;border:1px solid color-mix(in oklch,var(--paper-strong) 34%,transparent);border-radius:999px;color:var(--amber)}.quickstart span{color:#d6d0c5}.mission-card,.flow-strip,.learning-brief{display:grid;gap:var(--space-sm);margin:var(--space-md) var(--space-lg);padding:var(--space-md);border:1px solid var(--ink);border-radius:8px;background:color-mix(in oklch,var(--amber) 20%,var(--paper-strong));box-shadow:4px 4px #131c241f}.learning-brief{background:var(--paper-strong);border-color:var(--line);gap:var(--space-md)}.brief-head{display:flex;gap:var(--space-sm);align-items:flex-start}.brief-head svg{color:var(--amber);margin-top:2px}.brief-head h3{margin:0}.brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}.brief-grid section{padding:var(--space-md);border:1px solid var(--line);border-radius:8px;background:var(--paper)}.brief-grid strong{display:block;margin-bottom:6px;color:var(--cobalt);font:800 .72rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}.brief-grid p,.dataset-note p{margin:0;color:var(--muted);line-height:1.35}.mission-card{grid-template-columns:auto 1fr;align-items:start}.mission-card svg{margin-top:2px;color:var(--cobalt)}.mission-card strong,.mission-card span{display:block}.mission-card span,.flow-strip p{color:color-mix(in oklch,var(--ink) 72%,var(--muted))}.flow-strip>div:first-child{display:flex;align-items:center;gap:var(--space-sm)}.flow-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.flow-chips span{padding:6px 9px;border:1px solid var(--ink);border-radius:999px;background:var(--paper-strong);font:700 .76rem/1 Geist Mono,ui-monospace,monospace;animation:chipIn .36s cubic-bezier(.16,1,.3,1) both}.sql-editor-block{width:calc(100% - 2 * var(--space-lg));margin:0 var(--space-lg) var(--space-lg);min-width:0}.working-example{width:calc(100% - 2 * var(--space-lg));margin:0 var(--space-lg) var(--space-md);border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f7f3eb}.example-toolbar{border:0;border-radius:0;background:#e7e0d4;color:var(--ink)}.example-code{margin:0;max-height:150px;overflow:auto;padding:var(--space-md) var(--space-lg);color:#131c24;font:600 .88rem/1.55 Geist Mono,ui-monospace,monospace;white-space:pre-wrap}.lesson-task{display:grid;gap:var(--space-sm);width:calc(100% - 2 * var(--space-lg));margin:0 var(--space-lg) var(--space-md)}.step-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm)}.step-strip span{display:flex;align-items:center;gap:var(--space-sm);min-height:38px;padding:0 var(--space-sm);border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--muted);font-size:.86rem}.step-strip b{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--ink);color:var(--paper-strong);font:800 .72rem/1 Geist Mono,ui-monospace,monospace}.task-card{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-sm);border:1px solid var(--ink);border-radius:8px;padding:var(--space-md);background:color-mix(in oklch,var(--green) 10%,var(--paper-strong));box-shadow:4px 4px #131c241f}.task-card strong{display:block;margin-bottom:var(--space-xs);color:var(--cobalt);font:900 .74rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}.task-card p,.task-card ul{margin:0;color:var(--ink)}.task-card ul{display:grid;gap:var(--space-xs);padding-left:18px}.query-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:#141f2a;color:#e4ddd1}.query-toolbar>span{font:800 .72rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase;color:#de9300;color:oklch(.72 .16 73)}.query-toolbar>div{display:flex;gap:var(--space-sm)}.compact-action{min-height:34px;padding:0 var(--space-md);box-shadow:none}.sql-editor-wrap{position:relative;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:0 0 8px 8px;background:#0b1219;box-shadow:inset 0 0 0 1px #ffffff0a}.query-editor,.sql-highlight{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--space-lg);margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .98rem/1.65 Geist Mono,ui-monospace,monospace;-moz-tab-size:2;tab-size:2}.query-editor{width:100%;height:100%;resize:none;border:0;outline:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#f8f1e3;z-index:2}.query-editor:focus{box-shadow:inset 0 0 0 2px var(--cobalt)}.sql-highlight{pointer-events:none;color:#d0cabe;z-index:1;overflow:hidden}.tok-keyword{color:#efac45;font-weight:800}.tok-function{color:#69c989;font-weight:800}.tok-string{color:#f69b94}.tok-literal{color:#7aacf6;font-weight:800}.tok-operator{color:#e1d6c2;font-weight:800}.tok-comment{color:#7d8892}.note-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md);padding:0 var(--space-lg) var(--space-lg)}.note-grid p,.warning,.error,.empty{margin:0;padding:var(--space-md);border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--muted)}.warning{margin:var(--space-md) var(--space-lg) 0;color:#5f3d00;color:oklch(.39 .11 73);border-color:color-mix(in oklch,var(--amber),var(--line))}.note-grid p,.warning,.error{animation:liftIn .48s cubic-bezier(.16,1,.3,1) both}.error{margin:var(--space-lg);color:var(--red);border-color:color-mix(in oklch,var(--red),var(--line))}.empty{margin:var(--space-lg);display:grid;gap:var(--space-sm)}.runtime{font:600 .82rem/1 Geist Mono,ui-monospace,monospace;color:var(--muted)}.table-wrap{overflow:auto;max-height:330px;margin:var(--space-lg);border:1px solid var(--line);border-radius:8px;animation:liftIn .46s cubic-bezier(.16,1,.3,1) both}table{width:100%;border-collapse:collapse;min-width:620px;background:var(--paper-strong)}th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}th{position:sticky;top:0;background:#eee7db;color:var(--cobalt);font:700 .74rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}td{font:500 .9rem/1.25 Geist Mono,ui-monospace,monospace}tbody tr{animation:rowIn .36s cubic-bezier(.16,1,.3,1) both}tbody tr:nth-child(2){animation-delay:35ms}tbody tr:nth-child(3){animation-delay:70ms}tbody tr:nth-child(4){animation-delay:105ms}tbody tr:nth-child(5){animation-delay:.14s}tbody tr:nth-child(6){animation-delay:175ms}tbody tr:nth-child(7){animation-delay:.21s}tbody tr:nth-child(8){animation-delay:245ms}tbody tr:nth-child(9){animation-delay:.28s}tbody tr:nth-child(10){animation-delay:315ms}tbody tr:hover{background:color-mix(in oklch,var(--amber) 14%,var(--paper-strong))}.explain{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:0 var(--space-lg) var(--space-lg)}.explain-title{flex-basis:100%;font-size:.8rem;text-transform:uppercase;color:var(--cobalt)}.explain p,.explain span{margin:0;padding:8px 10px;border-radius:999px;background:#ebe0cb;color:var(--muted);font-size:.82rem}.explain span{background:color-mix(in oklch,var(--green) 16%,var(--paper-strong));color:#004421;color:oklch(.34 .11 153)}.segmented{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.segmented button{min-height:36px;border:0;border-radius:6px;background:transparent;color:var(--muted)}.segmented .active{background:var(--ink);color:var(--paper-strong)}.lessons,.saves,.examples{display:grid;gap:var(--space-md)}.lesson{display:grid;gap:var(--space-xs);width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;padding:var(--space-md);background:var(--paper)}.lesson-chapter{display:grid;gap:var(--space-sm)}.lesson-chapter h4{margin:var(--space-sm) 0 0;color:var(--cobalt);font:900 .74rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}.lesson,.example-button,.save-row>button:first-child{transition:transform .18s ease,border-color .18s ease,background .18s ease}.lesson.active{border-color:var(--cobalt);background:color-mix(in oklch,var(--cobalt) 8%,var(--paper-strong))}.lesson.locked{opacity:.62;cursor:not-allowed;background:color-mix(in oklch,var(--paper) 72%,var(--line))}.lesson span,.lesson small,.muted,.save-row span,.schema-tables p,.example-button span{color:var(--muted)}.lesson span,.lesson small{font:600 .72rem/1 Geist Mono,ui-monospace,monospace;text-transform:uppercase}.lesson small{display:inline-flex;align-items:center;gap:5px}.example-button{display:grid;gap:var(--space-xs);width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;padding:var(--space-md);background:var(--paper)}.example-button strong{color:var(--ink)}.save-slot-panel{display:grid;gap:var(--space-md);width:calc(100% - 2 * var(--space-lg));margin:calc(-1 * var(--space-sm)) var(--space-lg) var(--space-lg);padding:var(--space-md);border:1px solid var(--line);border-radius:8px;background:var(--paper-strong);box-shadow:var(--shadow);animation:liftIn .26s cubic-bezier(.16,1,.3,1) both}.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm)}.slot-grid button{display:grid;gap:3px;min-height:58px;padding:var(--space-sm);border:1px solid var(--line);border-radius:8px;background:var(--paper);text-align:left}.slot-grid button.active{border-color:var(--cobalt);background:color-mix(in oklch,var(--cobalt) 8%,var(--paper-strong))}.slot-grid span,.save-slot-panel label span{color:var(--muted);font-size:.8rem}.save-slot-panel label{display:grid;gap:var(--space-xs)}.save-slot-panel input{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 var(--space-md);background:var(--paper);color:var(--ink);font:inherit}.save-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-sm);align-items:center}.save-row>button:first-child{display:grid;gap:var(--space-xs);text-align:left;border:1px solid var(--line);border-radius:8px;padding:var(--space-md);background:var(--paper)}.graph{width:100%;aspect-ratio:1.65;margin:var(--space-md) 0;overflow:visible}.graph-caption{margin:var(--space-sm) 0 0;color:var(--muted);font-size:.92rem}.key-primer{display:grid;gap:var(--space-sm);margin-top:var(--space-md)}.key-primer div{display:grid;grid-template-columns:auto 34px 1fr;gap:var(--space-sm);align-items:start;padding:var(--space-sm);border:1px solid var(--line);border-radius:8px;background:var(--paper)}.key-primer svg{margin-top:2px;color:var(--cobalt)}.key-primer strong{display:grid;place-items:center;min-height:26px;border-radius:999px;background:var(--ink);color:var(--paper-strong);font:800 .7rem/1 Geist Mono,ui-monospace,monospace}.key-primer span{color:var(--muted);line-height:1.3}.key-primer b{display:block;color:var(--ink)}.graph line{stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 3}.graph line.hot{stroke:var(--amber);stroke-width:2.2;animation:dash 1.4s linear infinite;filter:drop-shadow(0 0 4px oklch(.72 .16 73 / .45))}.node circle{fill:var(--paper-strong);stroke:var(--ink);stroke-width:1.2;transition:transform .22s ease,fill .22s ease;transform-box:fill-box;transform-origin:center}.node.active circle{fill:var(--cobalt);stroke:var(--cobalt);transform:scale(1.18)}.node text{text-anchor:middle;font:600 3.4px/1 Geist Mono,ui-monospace,monospace;fill:var(--muted)}.node.active text{fill:var(--ink)}.schema-tables{display:grid;gap:var(--space-sm)}details{border:1px solid var(--line);border-radius:8px;padding:var(--space-md);background:var(--paper)}details[open]{background:color-mix(in oklch,var(--cobalt) 6%,var(--paper-strong))}summary{cursor:pointer;font-weight:700}.mini-action,.column-token{border:1px solid var(--line);border-radius:999px;background:var(--paper-strong);color:var(--ink);transition:transform .18s ease,background .18s ease,border-color .18s ease}.mini-action{display:block;width:fit-content;margin:var(--space-sm) 0;padding:6px 10px;font:700 .76rem/1 Geist Mono,ui-monospace,monospace}.column-token{display:inline-block;margin:6px 6px 0 0;padding:5px 7px;font:600 .74rem/1 Geist Mono,ui-monospace,monospace}.mini-action:hover,.column-token:hover{border-color:var(--cobalt);background:color-mix(in oklch,var(--cobalt) 9%,var(--paper-strong))}.shape-list{display:grid;gap:var(--space-sm);padding-left:18px;color:var(--muted)}@keyframes dash{to{stroke-dashoffset:-12}}@keyframes liftIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rowIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes chipIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:1180px){.workspace{grid-template-columns:280px minmax(0,1fr)}.inspector{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media(max-width:760px){.app-shell{padding:var(--space-md)}.topbar,.panel-header{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.button-row{width:100%}.primary-button,.secondary-button{flex:1}.brief-grid,.step-strip,.task-card{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}