:root,[data-theme=dark]{--bg: #1a1b1e;--fg: #fff;--code-bg: color-mix(in srgb, var(--fg) 16%, transparent)}[data-theme=light]{--bg: #f4f4f6;--fg: #1a1b1e;--code-bg: color-mix(in srgb, var(--fg) 9%, transparent)}:root,[data-theme=dark]{--kw-color: #60a5fa;--string-color: #4ade80}[data-theme=light]{--kw-color: #2563eb;--string-color: #16a34a}:root{--nav-height: 56px;--accent: #f87171;--info: #60a5fa;--success: #4ade80;--font-mono: "Fira Code", "Courier New", monospace;--border-faint: color-mix(in srgb, var(--fg) 8%, transparent);--border: color-mix(in srgb, var(--fg) 15%, transparent);--border-strong: color-mix(in srgb, var(--fg) 25%, transparent);--border-emphasis: color-mix(in srgb, var(--fg) 40%, transparent);--surface-faint: color-mix(in srgb, var(--fg) 4%, transparent);--surface: color-mix(in srgb, var(--fg) 10%, transparent);--accent-surface: color-mix(in srgb, var(--accent) 6%, transparent);--info-surface: color-mix(in srgb, var(--info) 6%, transparent);--success-surface: color-mix(in srgb, var(--success) 6%, transparent);--overlay-bg: color-mix(in srgb, var(--bg) 55%, transparent);--opacity-faint: .35;--opacity-dim: .4;--opacity-subtle: .5;--opacity-muted: .6;--opacity-secondary: .7;--opacity-strong: .8;--transition-fast: .15s ease-in-out;--transition: .2s ease-in-out;--fs-xs: .75rem;--fs-code: .8rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-lg: 1.1rem;--fs-xl: 1.5rem;--fs-2xl: 2.25rem;--fw-light: 300;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--br-sm: 3px;--br: 4px;--br-md: 6px;--br-lg: 8px}.btn-primary{display:inline-block;padding:.5rem 1.5rem;background:var(--fg);color:var(--bg);border:none;border-radius:var(--br);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:opacity var(--transition-fast)}.btn-primary:hover{opacity:.85}.btn-ghost{background:none;border:none;color:inherit;cursor:pointer;padding:0;opacity:var(--opacity-faint);transition:opacity var(--transition-fast)}.btn-ghost:hover{opacity:var(--opacity-secondary)}.btn-outline{display:inline-block;background:none;border:1px solid var(--border-strong);color:var(--fg);padding:.45rem 1.25rem;border-radius:var(--br);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer;opacity:var(--opacity-muted);transition:opacity var(--transition-fast)}.btn-outline:hover:not(:disabled){opacity:1}.btn-outline:disabled{opacity:.25;cursor:default}.btn-icon{display:flex;align-items:center;justify-content:center;background:none;border:none;color:inherit;cursor:pointer;padding:0;line-height:1;opacity:var(--opacity-faint);transition:opacity var(--transition-fast)}.btn-icon:hover{opacity:1}.viz-toggle{display:flex;justify-content:center;margin-bottom:1.25rem}.toggle-pill{padding:.35rem 1rem;background:transparent;border:1px solid var(--border);color:var(--fg);font-size:var(--fs-code);font-family:var(--font-mono);cursor:pointer;opacity:var(--opacity-subtle);transition:background var(--transition-fast),opacity var(--transition-fast)}.toggle-pill:first-child{border-radius:var(--br) 0 0 var(--br);border-right:none}.toggle-pill:last-child{border-radius:0 var(--br) var(--br) 0}.toggle-pill.active{background:var(--surface);opacity:1}.toggle-pill:hover{opacity:var(--opacity-secondary)}.eyebrow{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;opacity:var(--opacity-faint);margin-bottom:.75rem}.code-block{font-family:var(--font-mono);font-size:var(--fs-code);line-height:1.6;background:var(--surface-faint);border:1px solid var(--border-faint);border-radius:var(--br-md);padding:1rem 1.25rem;overflow-x:auto;white-space:pre}.code-input{font-family:var(--font-mono);font-size:var(--fs-code);background:var(--border-faint);border:none;border-bottom:1px solid var(--border-emphasis);color:var(--fg);outline:none;padding:0 .2rem;border-radius:2px 2px 0 0}.code-input::placeholder{opacity:var(--opacity-faint);font-style:italic}*{margin:0;padding:0;box-sizing:border-box}:focus-visible{outline:1px solid var(--fg);box-shadow:none;border-radius:var(--br-sm);opacity:1}code{font-family:monospace;font-size:.875em;background:var(--code-bg);border-radius:var(--br-sm);padding:.15em .4em}html{scrollbar-width:thin;scrollbar-color:var(--border) transparent}html::-webkit-scrollbar{width:8px}html::-webkit-scrollbar-track{background:transparent}html::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--br-sm)}html::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}body{background:var(--bg);color:var(--fg);font-family:Plus Jakarta Sans,system-ui,sans-serif;padding-top:var(--nav-height);min-height:100vh;transition:background var(--transition),color var(--transition)}app-root{display:contents}nav a,nav button{color:var(--fg);text-decoration:none;font-weight:var(--fw-semibold);opacity:.25;transition:opacity var(--transition)}nav a:hover,nav button:hover{opacity:var(--opacity-secondary)}nav a.active{opacity:1}.project-card{display:flex;flex-direction:column;padding:1.75rem;border:1px solid var(--border-faint);border-radius:var(--br-lg);text-decoration:none;color:var(--fg);transition:border-color var(--transition),transform var(--transition)}.project-card:hover{border-color:var(--border-strong);transform:translateY(-3px)}.project-card h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:.6rem}.project-card p{font-weight:var(--fw-light);font-size:var(--fs-sm);opacity:var(--opacity-muted);flex:1;margin-bottom:1.5rem;line-height:1.6}.project-card .cta{font-size:var(--fs-sm);font-weight:var(--fw-medium);opacity:var(--opacity-dim);transition:opacity var(--transition)}.project-card:hover .cta{opacity:.8}main{min-height:calc(100vh - 2 * var(--nav-height));display:flex;flex-direction:column;max-width:860px;margin:0 auto;padding:4rem 3rem}@media(width<=768px){main{padding:2.5rem 1.5rem}}.lab-page{max-width:860px;margin:0 auto;padding:3rem 1.5rem 6rem}.lab-header{margin-bottom:2.5rem}.lab-header h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.15}.schema-btn .schema-icon-wrap{display:grid}.schema-btn .schema-icon-wrap fa-icon{grid-area:1/1}.schema-btn .icon-star{opacity:0;transition:opacity var(--transition-fast)}.schema-btn .icon-db{transition:opacity var(--transition-fast)}.schema-btn:hover .icon-db{opacity:0}.schema-btn:hover .icon-star{opacity:1}.collapsible-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--transition)}.collapsible-body.is-open{grid-template-rows:1fr}.collapsible-body>*{overflow:hidden;min-height:0}.schema-inline{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--transition)}.schema-inline.is-open{grid-template-rows:1fr}.schema-inline>div{overflow:hidden;padding-bottom:0;transition:padding-bottom var(--transition)}.schema-inline.is-open>div{padding-bottom:2rem}.lab-eyebrow-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.lab-eyebrow-row .eyebrow{margin-bottom:0}.step-copy a{color:var(--fg);text-underline-offset:3px;opacity:var(--opacity-secondary);transition:opacity var(--transition)}.step-copy a:hover{opacity:1}.step-shell{position:relative;padding-top:2rem;scroll-margin-top:var(--nav-height)}.step-back{position:absolute;top:0;left:0;font-size:var(--fs-lg)}.step-forward{position:absolute;top:0;right:0;font-size:var(--fs-lg)}.step-indicator{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;opacity:var(--opacity-faint);margin-bottom:2rem}.challenge-actions-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.challenge-actions-row .btn-ghost{font-size:var(--fs-code)}.feedback-block{border-left:3px solid;padding:.875rem 1.25rem;border-radius:0 var(--br) var(--br) 0;margin-bottom:1.25rem;font-size:var(--fs-sm);line-height:1.65}.feedback-block p{margin:0}.feedback-block code{font-size:.85em;font-family:var(--font-mono)}.feedback-block--error{border-color:var(--accent);background:var(--accent-surface)}.feedback-block--reveal{border-color:var(--info);background:var(--info-surface)}.feedback-block--success{border-color:var(--success);background:var(--success-surface)}.query-result-table{overflow-x:auto;margin-bottom:1.25rem;border-radius:var(--br-md);border:1px solid var(--border-faint)}.query-result-table table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--fs-xs)}.query-result-table th,.query-result-table td{padding:.375rem .75rem;text-align:left;border-bottom:1px solid var(--border-faint);white-space:nowrap}.query-result-table th{color:color-mix(in srgb,var(--fg) 55%,transparent);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;border-bottom-color:var(--border)}.query-result-table tbody tr:last-child td{border-bottom:none}