Spaces:
Running
Running
| :root { | |
| font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: #17231b; | |
| background: #f5f4ed; | |
| font-synthesis: none; | |
| --ink: #17231b; | |
| --muted: #677067; | |
| --paper: #fffef8; | |
| --line: #d8ddd3; | |
| --green: #145b37; | |
| --green-deep: #0e4329; | |
| --lime: #dff45c; | |
| --orange: #ef8354; | |
| --blue: #2b66d9; | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { margin: 0; min-width: 320px; background: #f5f4ed; } | |
| button, input { font: inherit; } | |
| button, a { -webkit-tap-highlight-color: transparent; } | |
| .page-shell { width: min(1440px, 100%); margin: 0 auto; padding: 0 42px; } | |
| .site-header { | |
| height: 76px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .brand, .docs-link { color: var(--ink); text-decoration: none; font-weight: 750; } | |
| .brand { display: inline-flex; align-items: center; gap: 11px; letter-spacing: -.02em; } | |
| .brand-mark { | |
| width: 30px; | |
| height: 30px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 50%; | |
| color: var(--lime); | |
| background: var(--green-deep); | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| } | |
| .docs-link { color: var(--green); font-size: 14px; } | |
| .header-actions { display: flex; align-items: center; gap: 18px; } | |
| .language-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; } | |
| .language-switch button { padding: 3px 7px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; } | |
| .language-switch button.active { color: white; background: var(--green); } | |
| .hero { | |
| min-height: 460px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.1fr) minmax(440px, .9fr); | |
| align-items: center; | |
| gap: 72px; | |
| padding: 76px 0 66px; | |
| } | |
| .eyebrow, .section-index, .query-card-label { | |
| margin: 0 0 14px; | |
| color: var(--green); | |
| font-size: 11px; | |
| font-weight: 850; | |
| letter-spacing: .18em; | |
| } | |
| h1 { | |
| margin: 0; | |
| max-width: 820px; | |
| font-family: Georgia, "Noto Serif SC", serif; | |
| font-size: clamp(42px, 5.6vw, 78px); | |
| font-weight: 500; | |
| line-height: 1.08; | |
| letter-spacing: -.055em; | |
| } | |
| .hero-intro { max-width: 680px; margin: 26px 0 0; color: var(--muted); font-size: 18px; } | |
| .model-map { | |
| position: relative; | |
| min-height: 310px; | |
| padding: 38px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 12px; | |
| border: 1px solid #bfc8bb; | |
| border-radius: 28px; | |
| background: linear-gradient(145deg, #fdfdf8, #e9eee5); | |
| box-shadow: 0 18px 48px rgba(33, 60, 40, .06); | |
| overflow: hidden; | |
| } | |
| .model-map::before { | |
| content: "DOMAIN MODEL"; | |
| position: absolute; | |
| top: 18px; | |
| left: 22px; | |
| color: #708073; | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: .16em; | |
| } | |
| .model-flow { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; } | |
| .model-flow > span:not(.model-arrow), .model-leaves span { | |
| min-width: 0; | |
| padding: 15px 17px; | |
| border: 1px solid #b8c2b7; | |
| border-radius: 12px; | |
| background: rgba(255, 255, 250, .86); | |
| font: 750 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; | |
| box-shadow: 0 8px 22px rgba(30, 58, 38, .05); | |
| } | |
| .model-map small { display: block; margin-top: 7px; color: var(--muted); font: 12px/1.2 Inter, sans-serif; } | |
| .model-flow > span.model-root { color: white; border-color: var(--green); background: var(--green); } | |
| .model-map .model-root small { color: #cce4d4; } | |
| .model-arrow { color: #809087; font-size: 22px; text-align: center; } | |
| .model-arrow-split { height: 22px; line-height: 18px; } | |
| .model-leaves { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } | |
| .runtime-language-panel { | |
| margin-bottom: 28px; | |
| padding: 24px; | |
| display: grid; | |
| grid-template-columns: minmax(240px, .72fr) minmax(0, 1.8fr); | |
| align-items: center; | |
| gap: 30px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--paper); | |
| } | |
| .runtime-language-copy .section-index { margin-bottom: 8px; } | |
| .runtime-language-copy h2 { | |
| margin: 0; | |
| font-family: Georgia, "Noto Serif SC", serif; | |
| font-size: clamp(22px, 2.4vw, 31px); | |
| font-weight: 500; | |
| line-height: 1.15; | |
| letter-spacing: -.035em; | |
| } | |
| .runtime-language-copy p:last-child { margin: 11px 0 0; color: var(--muted); font-size: 13px; } | |
| .runtime-language-selector { display: grid; grid-template-columns: repeat(7, minmax(82px, 1fr)); gap: 8px; } | |
| .runtime-language { | |
| min-width: 0; | |
| padding: 13px 8px 11px; | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| gap: 4px; | |
| border: 1px solid #d7ddd5; | |
| border-radius: 12px; | |
| color: var(--ink); | |
| background: #fafbf7; | |
| text-align: center; | |
| text-decoration: none; | |
| transition: border-color .16s ease, background .16s ease, transform .16s ease; | |
| } | |
| .runtime-language:hover { border-color: #98aa9d; background: white; transform: translateY(-2px); } | |
| .runtime-language.active { color: white; border-color: var(--green); background: var(--green); box-shadow: 0 8px 20px rgba(20, 91, 55, .14); } | |
| .runtime-language-icon { font-size: 25px; line-height: 1.1; } | |
| .runtime-language strong { overflow: hidden; max-width: 100%; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } | |
| .runtime-language small { color: #78837a; font-size: 8px; line-height: 1.25; } | |
| .runtime-language.active small { color: #d5e7da; } | |
| .runtime-bar { | |
| min-height: 72px; | |
| padding: 14px 18px 14px 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| border-radius: 14px; | |
| color: #e7f1e9; | |
| background: var(--green-deep); | |
| } | |
| #status { margin: 0; color: #c8d9ce; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .controls { display: flex; align-items: center; gap: 18px; } | |
| .toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; } | |
| .toggle input { position: absolute; opacity: 0; pointer-events: none; } | |
| .toggle span { | |
| position: relative; | |
| width: 38px; | |
| height: 22px; | |
| border-radius: 999px; | |
| background: #55705f; | |
| transition: background .2s ease; | |
| } | |
| .toggle span::after { | |
| content: ""; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: white; | |
| transition: transform .2s ease; | |
| } | |
| .toggle input:checked + span { background: var(--lime); } | |
| .toggle input:checked + span::after { transform: translateX(16px); background: var(--green-deep); } | |
| .secondary-button, .tree-actions button { | |
| border: 1px solid currentColor; | |
| border-radius: 8px; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .secondary-button { padding: 8px 12px; color: white; font-size: 12px; } | |
| .secondary-button:disabled { opacity: .45; cursor: wait; } | |
| .query-browser { padding: 96px 0 82px; } | |
| .section-heading, .result-heading { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 36px; | |
| margin-bottom: 40px; | |
| } | |
| .section-heading h2, .result-heading h2 { | |
| margin: 0; | |
| font-family: Georgia, "Noto Serif SC", serif; | |
| font-size: clamp(34px, 4vw, 52px); | |
| font-weight: 500; | |
| letter-spacing: -.045em; | |
| } | |
| .section-heading > p { max-width: 420px; margin: 0; color: var(--muted); } | |
| .query-group { | |
| display: grid; | |
| grid-template-columns: 230px 1fr; | |
| gap: 36px; | |
| padding: 24px 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| .query-group:last-child { border-bottom: 1px solid var(--line); } | |
| .query-group-heading h2 { margin: 0 0 4px; font-size: 16px; } | |
| .query-group-heading p { margin: 0; color: var(--muted); font-size: 12px; } | |
| .query-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } | |
| .query-links a { | |
| position: relative; | |
| padding: 5px 0; | |
| color: #34443a; | |
| text-decoration-color: #a6b1a8; | |
| text-underline-offset: 5px; | |
| font-weight: 650; | |
| transition: color .16s ease; | |
| } | |
| .query-links a::after { content: " ↗"; color: #9aa49b; font-weight: 400; } | |
| .query-links a:hover { color: var(--green); } | |
| .query-links a.active { color: var(--green); text-decoration-color: var(--orange); text-decoration-thickness: 2px; } | |
| .result-panel { | |
| margin: 0 -42px; | |
| padding: 82px 42px 92px; | |
| color: #eef5f0; | |
| background: #111a15; | |
| } | |
| .result-heading { align-items: center; } | |
| .result-heading .section-index { color: var(--lime); } | |
| .result-heading h2 { color: white; } | |
| #result-description { max-width: 620px; margin: 10px 0 0; color: #9fb0a4; } | |
| .result-actions { display: flex; align-items: center; gap: 10px; } | |
| .result-view-switch, .tree-actions { display: flex; gap: 6px; } | |
| .result-view-switch button, .tree-actions button { padding: 8px 11px; border: 1px solid #536159; border-radius: 8px; color: #aebdb3; background: transparent; font-size: 12px; cursor: pointer; } | |
| .result-view-switch button.active { color: #17231b; border-color: var(--lime); background: var(--lime); } | |
| .result-view-switch button:disabled { opacity: .35; cursor: default; } | |
| .tree-actions button:hover { color: var(--lime); } | |
| .result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } | |
| .tree-card, .query-card, .sql-card { border: 1px solid #2f3d34; border-radius: 14px; background: #17231b; } | |
| .tree-card { min-height: 520px; overflow: hidden; } | |
| .tree-card-bar { | |
| min-height: 48px; | |
| padding: 0 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid #2f3d34; | |
| color: #b8c9bd; | |
| font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; | |
| text-transform: uppercase; | |
| letter-spacing: .08em; | |
| } | |
| #result-meta { margin: 0; color: #829188; text-transform: none; letter-spacing: 0; } | |
| .json-tree { min-height: 470px; max-height: 680px; padding: 18px 20px 28px; overflow: auto; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } | |
| .json-tree.loading { opacity: .55; } | |
| .tree-actions.hidden { display: none; } | |
| .result-table-shell { width: 100%; min-height: 470px; overflow: auto; } | |
| .result-table { width: 100%; border-collapse: collapse; white-space: nowrap; } | |
| .result-table th, .result-table td { padding: 11px 14px; border-bottom: 1px solid #2f3d34; text-align: left; vertical-align: top; } | |
| .result-table th { position: sticky; top: 0; z-index: 1; color: #8ea095; background: #131d17; font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .result-table td { color: #d9e5dc; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .result-table tbody tr:hover { background: rgba(255, 255, 255, .025); } | |
| .result-table-empty { margin: 0; padding: 48px 20px; color: #7f9185; text-align: center; } | |
| .tree-branch { margin: 2px 0; } | |
| .tree-branch > summary { | |
| min-height: 29px; | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| list-style: none; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| } | |
| .tree-branch > summary::-webkit-details-marker { display: none; } | |
| .tree-branch > summary::before { | |
| content: "›"; | |
| width: 15px; | |
| color: #73887a; | |
| font-size: 18px; | |
| line-height: 1; | |
| transform-origin: center; | |
| transition: transform .12s ease; | |
| } | |
| .tree-branch[open] > summary::before { transform: rotate(90deg); } | |
| .tree-branch > summary:hover { background: rgba(255, 255, 255, .035); } | |
| .tree-children { margin-left: 8px; padding-left: 20px; border-left: 1px solid #314238; } | |
| .tree-leaf { min-height: 28px; display: grid; grid-template-columns: minmax(110px, 180px) 1fr; align-items: baseline; gap: 12px; padding-left: 23px; } | |
| .tree-key { color: #bdd0c2; font-weight: 700; } | |
| .tree-preview { overflow: hidden; color: #718079; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } | |
| .tree-value { overflow-wrap: anywhere; } | |
| .tree-string { color: #dff45c; } | |
| .tree-number { color: #82b4ff; } | |
| .tree-boolean { color: #f2a27f; } | |
| .tree-null { color: #78847c; font-style: italic; } | |
| .query-card, .sql-card { min-width: 0; padding: 22px; } | |
| .query-card-label { color: var(--lime); } | |
| .query-card pre { | |
| max-height: 430px; | |
| margin: 0; | |
| padding: 0; | |
| overflow: auto; | |
| color: #d5e2d8; | |
| background: transparent; | |
| font: 12px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| white-space: pre-wrap; | |
| } | |
| .query-params { margin-top: 24px; padding-top: 18px; border-top: 1px solid #2f3d34; } | |
| .query-params.hidden { display: none; } | |
| .query-params .query-card-label { margin-bottom: 10px; color: #82b4ff; } | |
| .query-params pre { max-height: 220px; color: #b9caee; } | |
| .query-note { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #2f3d34; color: #829188; font-size: 12px; } | |
| .sql-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } | |
| .sql-card-heading .query-card-label { margin-bottom: 0; } | |
| #sql-count { color: #7f9185; font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .execution-evidence-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid #34433a; border-radius: 8px; } | |
| .execution-evidence { min-width: 1500px; width: 100%; border-collapse: collapse; color: #c7d5cb; } | |
| .execution-evidence th, .execution-evidence td { | |
| padding: 10px 12px; | |
| border-right: 1px solid #34433a; | |
| border-bottom: 1px solid #34433a; | |
| text-align: left; | |
| vertical-align: top; | |
| white-space: nowrap; | |
| } | |
| .execution-evidence th:last-child, .execution-evidence td:last-child { border-right: 0; } | |
| .execution-evidence tbody tr:last-child td { border-bottom: 0; } | |
| .execution-evidence th { color: #7f9185; background: #131d17; font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .execution-evidence td { color: #cbd8ce; background: #101813; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .execution-evidence tbody tr:hover td { background: #141f18; } | |
| .execution-evidence .evidence-trace { color: #b9caee; } | |
| .execution-evidence .evidence-sql { color: #dff45c; } | |
| .dashboard-result { max-height: none; padding: 0; color: var(--ink); background: #f7f8f5; font: 14px/1.45 Inter, system-ui, sans-serif; } | |
| .order-center { min-width: 880px; padding: 24px; } | |
| .order-center-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; } | |
| .order-center-toolbar h3 { margin: 0; color: #111d16; font: 750 22px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.025em; } | |
| .order-center-toolbar p { margin: 5px 0 0; color: #778078; font-size: 12px; } | |
| .order-search { width: min(390px, 45%); display: flex; align-items: center; gap: 6px; } | |
| .order-search input { | |
| min-width: 0; | |
| height: 32px; | |
| flex: 1; | |
| padding: 6px 10px; | |
| border: 1px solid #cfd5ce; | |
| border-radius: 7px; | |
| outline: 0; | |
| background: white; | |
| font-size: 12px; | |
| } | |
| .order-search input:focus { border-color: #8e9990; } | |
| .order-search-submit { | |
| width: 30px; | |
| height: 30px; | |
| flex: 0 0 30px; | |
| display: grid; | |
| place-items: center; | |
| padding: 0; | |
| border: 1px solid #cfd5ce; | |
| border-radius: 7px; | |
| color: #536057; | |
| background: white; | |
| cursor: pointer; | |
| } | |
| .order-search-submit:hover, .order-search-submit:focus-visible { | |
| color: var(--green); | |
| border-color: #93a097; | |
| outline: none; | |
| } | |
| .search-icon { | |
| position: relative; | |
| width: 13px; | |
| height: 13px; | |
| display: block; | |
| border: 1.5px solid currentColor; | |
| border-radius: 50%; | |
| } | |
| .search-icon::after { | |
| content: ""; | |
| position: absolute; | |
| right: -3px; | |
| bottom: -2px; | |
| width: 5px; | |
| height: 1.5px; | |
| border-radius: 1px; | |
| background: currentColor; | |
| transform: rotate(45deg); | |
| transform-origin: left center; | |
| } | |
| .order-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; } | |
| .metric-card { padding: 14px; display: grid; gap: 8px; text-align: left; border: 1px solid #dbe0da; border-radius: 9px; color: #58625b; background: white; cursor: pointer; } | |
| .metric-card strong { color: #16231a; font-size: 23px; line-height: 1; } | |
| .metric-card small { color: #727b74; font-size: 10px; font-variant-numeric: tabular-nums; } | |
| .metric-card.active { border-color: var(--metric-color, var(--blue)); box-shadow: inset 3px 0 0 var(--metric-color, var(--blue)); } | |
| .order-table { overflow: hidden; border: 1px solid #e0e4df; border-radius: 10px; background: white; } | |
| .order-row { min-width: 720px; display: grid; grid-template-columns: 1.05fr .85fr .75fr 2fr; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border-top: 1px solid #edf0ec; } | |
| .order-row:first-child { border-top: 0; } | |
| .order-row-head { min-height: 40px; color: #69736b; background: #f2f4f1; font-size: 11px; font-weight: 750; } | |
| .order-primary { color: #26322a; font: 650 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| .status-badge { display: inline-block; padding: 4px 8px; border-radius: 999px; color: #2b5e39; background: #e3f4e8; font-size: 10px; white-space: nowrap; } | |
| .status-pending_payment { color: #92580a; background: #fff0d8; } | |
| .status-paid { color: #215b9d; background: #e2efff; } | |
| .status-shipped { color: #1d6e38; background: #ddf5e4; } | |
| .status-cancelled { color: #7b4650; background: #f6e6e9; } | |
| .product-preview { display: flex; align-items: center; gap: 5px; } | |
| .product-thumb { width: 32px; height: 28px; display: grid; place-items: center; border: 1px solid #cad4ca; border-radius: 6px; color: #315139; background: linear-gradient(135deg, #e5eddf, #bdceb8); font: 800 11px/1 Inter, sans-serif; } | |
| .product-tone-1 { color: #725333; background: linear-gradient(135deg, #f1e5d4, #d3b58d); } | |
| .product-tone-2 { color: #3d526b; background: linear-gradient(135deg, #e1e9ef, #adbecd); } | |
| .product-preview small { color: #68736a; font-size: 10px; } | |
| .order-empty { padding: 48px 20px; color: #7a847c; text-align: center; } | |
| .order-center-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; } | |
| .order-center-footer p { margin: 0; color: #7a847c; font-size: 11px; } | |
| .pagination { display: flex; gap: 5px; } | |
| .pagination button { min-width: 31px; height: 31px; border: 1px solid #d8ddd7; border-radius: 6px; color: #465149; background: white; cursor: pointer; } | |
| .pagination button.active { color: white; border-color: var(--blue); background: var(--blue); } | |
| .pagination button:disabled { opacity: .4; cursor: default; } | |
| .observability-proof { padding: 88px 0 52px; } | |
| .observability-proof-heading { | |
| margin-bottom: 26px; | |
| display: grid; | |
| grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); | |
| align-items: end; | |
| gap: 34px; | |
| } | |
| .observability-proof-heading h2 { | |
| margin: 8px 0 0; | |
| font-family: Georgia, "Noto Serif SC", serif; | |
| font-size: clamp(30px, 4vw, 48px); | |
| font-weight: 500; | |
| line-height: 1.05; | |
| letter-spacing: -.04em; | |
| } | |
| .observability-proof-heading > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; } | |
| .observability-proof-figure { margin: 0; } | |
| .observability-proof-figure img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| border: 1px solid #d7ddd5; | |
| border-radius: 18px; | |
| background: #f4f5fb; | |
| box-shadow: 0 22px 54px rgba(28, 45, 34, .1); | |
| } | |
| .observability-proof-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; } | |
| footer { | |
| min-height: 86px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| @media (max-width: 980px) { | |
| .page-shell { padding: 0 24px; } | |
| .hero { grid-template-columns: 1fr; gap: 46px; padding-top: 58px; } | |
| .model-map { min-height: 260px; } | |
| .runtime-language-panel { grid-template-columns: 1fr; } | |
| .runtime-language-selector { grid-template-columns: repeat(4, minmax(100px, 1fr)); } | |
| .result-panel { margin: 0 -24px; padding-left: 24px; padding-right: 24px; } | |
| .result-grid { grid-template-columns: 1fr; } | |
| .observability-proof-heading { grid-template-columns: 1fr; align-items: start; gap: 14px; } | |
| } | |
| @media (max-width: 680px) { | |
| .page-shell { padding: 0 16px; } | |
| .site-header { height: 64px; } | |
| .header-actions { gap: 9px; } | |
| .docs-link { display: none; } | |
| h1 { font-size: 43px; } | |
| .hero { min-height: auto; padding: 48px 0; } | |
| .hero-intro { font-size: 16px; } | |
| .model-map { gap: 9px; padding: 52px 22px 22px; } | |
| .model-flow { grid-template-columns: 1fr; } | |
| .model-flow > span:not(.model-arrow), .model-leaves span { width: 100%; } | |
| .model-flow .model-arrow { transform: rotate(90deg); } | |
| .model-leaves { grid-template-columns: 1fr; } | |
| .runtime-language-panel { padding: 20px 16px; gap: 20px; } | |
| .runtime-language-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .runtime-language:last-child { grid-column: 1 / -1; } | |
| .runtime-bar, .section-heading, .result-heading { align-items: flex-start; flex-direction: column; } | |
| .runtime-bar { padding: 18px; } | |
| .controls { width: 100%; justify-content: space-between; } | |
| .query-browser { padding: 70px 0 64px; } | |
| .query-group { grid-template-columns: 1fr; gap: 14px; } | |
| .query-links { gap: 8px 18px; } | |
| .result-panel { margin: 0 -16px; padding: 64px 16px; } | |
| .result-actions { width: 100%; align-items: stretch; flex-direction: column; } | |
| .result-view-switch, .tree-actions { width: 100%; } | |
| .result-view-switch button, .tree-actions button { flex: 1; } | |
| .tree-leaf { grid-template-columns: minmax(90px, 120px) 1fr; padding-left: 15px; } | |
| .json-tree { padding-left: 12px; padding-right: 12px; } | |
| .observability-proof { padding: 64px 0 34px; } | |
| .observability-proof-figure img { border-radius: 12px; } | |
| } | |