/* Matlock Base Stylesheet */
:root { --mlk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif; --mlk-font-mono: 'JetBrains Mono', 'Cascadia Mono', 'Consolas', 'SF Mono', 'Ubuntu Mono', monospace; --mlk-fs-hero: 2.375rem; --mlk-fs-h2: 1.75rem; --mlk-fs-h3: 1.25rem; --mlk-fs-badge: 1.125rem; --mlk-fs-lead: 1.0625rem; --mlk-fs-body: 0.9375rem; --mlk-fs-small: 0.8125rem; --mlk-fs-micro: 0.75rem; --mlk-fw-regular: 400; --mlk-fw-medium: 500; --mlk-fw-semibold: 600; --mlk-ls-hero: -0.028em; --mlk-ls-heading: -0.02em; --mlk-ls-mono: 0.02em; --mlk-lh-tight: 1.16; --mlk-lh-snug: 1.35; --mlk-lh-spec: 1.42; --mlk-lh-body: 1.6; --mlk-width-prose: 620px; --mlk-width-site: 1200px; --mlk-gap-section: 5.5rem; --mlk-radius-sm: 4px; --mlk-radius-md: 6px; --mlk-canvas: #0B0C0E; --mlk-canvas-sink: #111317; --mlk-panel: #16191F; --mlk-panel-hover: #1C2028; --mlk-line: #232730; --mlk-border-active: #363C4A; --mlk-cta-bg: #F3F4F6; --mlk-cta-bg-hover: #FFFFFF; --mlk-cta-ink: #0B0C0E; --mlk-accent: #3B82F6; --mlk-accent-dim: #172554; --mlk-alert-pass: #2EA043; --mlk-alert-warn: #D29922; --mlk-alert-error: #E5484D; --mlk-tx-primary: #F3F4F6; --mlk-tx-secondary: #9CA3AF; --mlk-tx-muted: #8E96A4; --mlk-tx-disabled: #6B7280; --mlk-text: var(--mlk-tx-primary); --mlk-text-secondary: var(--mlk-tx-secondary); --mlk-text-muted: var(--mlk-tx-disabled); --mlk-line-strong: var(--mlk-border-active); --mlk-raised: var(--mlk-canvas-sink); --mlk-on-accent: var(--mlk-cta-ink); --mlk-accent-hover: var(--mlk-cta-bg-hover); --mlk-pass: var(--mlk-alert-pass); --mlk-pass-soft: var(--mlk-accent-dim); --mlk-error: var(--mlk-alert-error); --mlk-warning: var(--mlk-alert-warn); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; box-shadow: none; text-shadow: none; } html { color-scheme: dark; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); font-family: var(--mlk-font-sans); font-size: 16px; line-height: var(--mlk-lh-body); scroll-behavior: smooth; overflow-x: clip; max-width: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body { background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; max-width: 100%; text-align: start; } picture { display: contents; } p { max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); } a { color: var(--mlk-tx-primary); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--mlk-accent); } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--mlk-accent); outline-offset: 2px; } .container { width: 100%; max-width: var(--mlk-width-site); margin-inline: auto; padding-inline: 28px; } .header { background-color: var(--mlk-panel); backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--mlk-line); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; min-height: 64px; padding-block: 10px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); font-size: 1.0625rem; letter-spacing: var(--mlk-ls-heading); } .brand:hover { color: var(--mlk-tx-primary); } .brand-icon { width: 32px; height: 32px; display: block; } .brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; } .brand-sub { font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-regular); letter-spacing: 0; color: var(--mlk-tx-secondary); } .pr-brand .brand-sub { color: inherit; } .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; } .nav-links a { color: var(--mlk-tx-secondary); text-decoration: none; font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); } .nav-links a:hover, .nav-links a[aria-current="page"], .nav-connect-btn:hover { color: var(--mlk-tx-primary); } .nav-connect { position: relative; display: inline-flex; align-items: center; } .nav-connect-btn { appearance: none; background: transparent; border: none; padding: 0; margin: 0; color: var(--mlk-tx-secondary); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); cursor: pointer; } .connect-dropdown { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 60; width: 260px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .connect-dropdown[hidden] { display: none; } .connect-dropdown a { display: block; padding: 7px 10px; border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-micro); } .connect-dropdown a:hover { background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); } .dispatch-doc-card { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .nav-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .lang-select { background-color: var(--mlk-canvas); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 6px 10px; font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); cursor: pointer; } .lang-select:hover { border-color: var(--mlk-border-active); color: var(--mlk-tx-primary); } .header-price-badge { display: inline-flex; align-items: center; padding: 5px 10px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-secondary); background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); text-decoration: none; } .header-price-badge:hover { border-color: var(--mlk-border-active); color: var(--mlk-tx-primary); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .btn:hover { background-color: var(--mlk-panel-hover); border-color: var(--mlk-tx-secondary); color: var(--mlk-tx-primary); } .btn-primary { background-color: var(--mlk-cta-bg); color: var(--mlk-cta-ink); border-color: var(--mlk-cta-bg); font-weight: var(--mlk-fw-semibold); } .btn-primary:hover { background-color: var(--mlk-cta-bg-hover); border-color: var(--mlk-cta-bg-hover); color: var(--mlk-cta-ink); } .btn-secondary { background-color: var(--mlk-panel); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); } .btn-secondary:hover { background-color: var(--mlk-panel-hover); border-color: var(--mlk-accent); color: var(--mlk-tx-primary); } .btn-secondary.is-detected-os { border-color: var(--mlk-tx-primary); background-color: var(--mlk-panel-hover); } .btn-lg { padding: 11px 20px; font-size: var(--mlk-fs-body); } .btn-block { width: 100%; padding: 12px 20px; font-size: var(--mlk-fs-body); } .hero { padding-block: 4.5rem 5rem; border-bottom: 1px solid var(--mlk-line); background-color: var(--mlk-canvas); } .hero-split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; } .hero-pitch { text-align: start; } .eyebrow, .hero-badge { display: inline-block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); letter-spacing: var(--mlk-ls-mono); text-transform: uppercase; color: var(--mlk-tx-secondary); border-inline-start: 2px solid var(--mlk-accent); padding-inline-start: 10px; margin-bottom: 16px; } .hero-title { font-size: var(--mlk-fs-hero); font-weight: var(--mlk-fw-semibold); line-height: var(--mlk-lh-tight); letter-spacing: var(--mlk-ls-hero); color: var(--mlk-tx-primary); margin-bottom: 18px; max-width: 600px; } .hero-subtitle { font-size: var(--mlk-fs-lead); font-weight: var(--mlk-fw-regular); color: var(--mlk-tx-secondary); max-width: 580px; margin-bottom: 22px; line-height: 1.55; } .hero-lang-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 26px; } .hero-lang-label { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-disabled); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); margin-inline-end: 4px; } .lang-chip { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-primary); background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 3px 8px; } .hero-primary-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .hero-os-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); margin-bottom: 10px; } .hero-os-links a { color: var(--mlk-tx-secondary); text-decoration: none; } .hero-os-links a:hover, .hero-os-links a.is-detected-os { color: var(--mlk-tx-primary); text-decoration: underline; } .sub-sep { color: var(--mlk-border-active); } .hero-transparency-line { font-size: var(--mlk-fs-small); color: var(--mlk-tx-disabled); max-width: 580px; line-height: 1.5; } .workbench-frame { background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); overflow: hidden; } .workbench-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background-color: var(--mlk-canvas-sink); border-bottom: 1px solid var(--mlk-line); } .workbench-title-group { display: inline-flex; align-items: center; gap: 10px; } .viewport-dots { display: inline-flex; align-items: center; gap: 5px; } .v-dot { width: 8px; height: 8px; border-radius: 2px; background-color: var(--mlk-border-active); } .workbench-win-title { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .workbench-lock-pill { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 2px 8px; } .workbench-ledger { border-bottom: 1px solid var(--mlk-line); } .workbench-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--mlk-line); font-size: var(--mlk-fs-small); } .workbench-row:last-child { border-bottom: none; } .wb-row-name { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-medium); } .wb-row-sub { display: block; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin-top: 2px; } .wb-tag { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); padding: 2px 8px; border-radius: var(--mlk-radius-sm); border: 1px solid var(--mlk-line); white-space: nowrap; } .wb-tag-warn { color: var(--mlk-alert-warn); background-color: var(--mlk-canvas-sink); border-color: var(--mlk-border-active); } .wb-tag-err { color: var(--mlk-alert-error); background-color: var(--mlk-canvas-sink); border-color: var(--mlk-border-active); } .wb-tag-pass { color: var(--mlk-alert-pass); background-color: var(--mlk-canvas-sink); border-color: var(--mlk-border-active); } .workbench-seq { padding: 14px 16px; background-color: var(--mlk-canvas-sink); border-bottom: 1px solid var(--mlk-line); } .workbench-seq-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .workbench-seq-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); } .wb-step-chip { padding: 4px 9px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); color: var(--mlk-tx-primary); } .wb-step-chip.wb-step-email { border-color: var(--mlk-accent); } .wb-step-arrow { color: var(--mlk-tx-disabled); } .workbench-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .workbench-foot a { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-accent); text-decoration: none; } .workbench-foot a:hover { text-decoration: underline; } .section { padding-block: var(--mlk-gap-section); border-bottom: 1px solid var(--mlk-line); background-color: var(--mlk-canvas); content-visibility: auto; contain-intrinsic-size: 1px 560px; } .section-alt { background-color: var(--mlk-panel); } .section-sink { background-color: var(--mlk-canvas-sink); } .section-header { max-width: var(--mlk-width-prose); margin-bottom: 36px; } .section-title { font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); line-height: var(--mlk-lh-tight); color: var(--mlk-tx-primary); margin-bottom: 10px; } .section-subtitle { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); } .capabilities-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); background-color: var(--mlk-canvas); overflow: hidden; } .cap-cell { padding: 28px; border-bottom: 1px solid var(--mlk-line); border-inline-end: 1px solid var(--mlk-line); } .cap-cell:nth-child(2n) { border-inline-end: none; } .cap-cell:nth-last-child(-n+2) { border-bottom: none; } .cap-kicker { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-accent); margin-bottom: 8px; } .cap-title { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); margin-bottom: 10px; } .cap-desc { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); line-height: var(--mlk-lh-body); } .viewport-showcase { width: 100%; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); overflow: hidden; text-align: start; } .viewport-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 10px 18px; background-color: var(--mlk-canvas-sink); border-bottom: 1px solid var(--mlk-line); font-size: var(--mlk-fs-micro); } .viewport-window-label { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .viewport-status-tag { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); } .wasm-dropzone { padding: 20px 22px; border-bottom: 1px solid var(--mlk-line); background-color: var(--mlk-panel); display: flex; flex-direction: column; gap: 14px; } .wasm-dropzone.is-dragover { background-color: var(--mlk-canvas-sink); border-color: var(--mlk-accent); } .wasm-drop-title { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: none; } .wasm-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .wasm-token-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--mlk-line); } .wasm-token-input { background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 7px 10px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); width: 240px; } .wasm-hidden-input { display: none; } .wasm-github-bar { padding: 14px 22px; border-bottom: 1px solid var(--mlk-line); background-color: var(--mlk-canvas-sink); display: flex; flex-direction: column; gap: 8px; } .wasm-github-label { font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); } .wasm-github-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .wasm-github-input { width: 100%; min-height: 44px; padding: 9px 12px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); direction: ltr; unicode-bidi: isolate; text-align: left; } .wasm-github-status { margin: 0; min-height: 1.35em; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .wasm-github-status[data-error="1"] { color: var(--mlk-alert-error); } .wasm-action-row .btn, .wasm-github-bar .btn, .ide-deep-links .btn, #btnCopyAgentRelayReply, #btnCopyOrderAgentReply { min-height: 44px; min-width: 44px; } .order-agent-relay-box { margin-top: 10px; } .ide-deep-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 12px 18px; } .viewport-body { display: grid; grid-template-columns: 240px 1fr; } .viewport-score-pane { padding: 22px 20px; border-inline-end: 1px solid var(--mlk-line); display: flex; flex-direction: column; justify-content: center; background-color: var(--mlk-panel); } .score-kicker { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-secondary); margin-bottom: 6px; } .score-number { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); line-height: var(--mlk-lh-tight); color: var(--mlk-tx-primary); margin-bottom: 10px; } .score-grade-badge { display: inline-block; align-self: flex-start; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 3px 9px; margin-bottom: 8px; } .score-timing { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); } .viewport-prompt-pane { padding: 20px 22px; background-color: var(--mlk-canvas-sink); text-align: start; } .prompt-pane-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .prompt-pane-title { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); } .prompt-copy-pill { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 4px 10px; cursor: pointer; } .prompt-copy-pill:hover { border-color: var(--mlk-accent); } .prompt-code-preview { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); line-height: 1.55; color: var(--mlk-tx-secondary); white-space: pre-wrap; } .stack-rows { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); background-color: var(--mlk-canvas); margin-bottom: 32px; overflow: hidden; } .stack-row { display: flex; flex-direction: column; padding: 18px 22px; border-bottom: 1px solid var(--mlk-line); border-inline-end: 1px solid var(--mlk-line); } .stack-row:nth-child(2n) { border-inline-end: none; } .stack-row:nth-last-child(-n+2) { border-bottom: none; } .stack-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .stack-row-name { font-size: var(--mlk-fs-body); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); } .stack-row-tag { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); } .stack-row-desc { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); line-height: var(--mlk-lh-spec); } .ecosystem-matrix { border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); background-color: var(--mlk-canvas); overflow: hidden; } .eco-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--mlk-line); } .eco-row:last-child { border-bottom: none; } .eco-label { padding: 16px 20px; background-color: var(--mlk-canvas-sink); border-inline-end: 1px solid var(--mlk-line); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-primary); display: flex; align-items: center; } .eco-values { padding: 16px 20px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); line-height: 1.6; } .security-offer-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); background-color: var(--mlk-panel); overflow: hidden; } .security-pane, .offer-pane { padding: 32px; } .security-pane { border-inline-end: 1px solid var(--mlk-line); } .offer-pane { background-color: var(--mlk-canvas-sink); } .pane-title { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); color: var(--mlk-tx-primary); margin-bottom: 10px; } .pane-body { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); line-height: var(--mlk-lh-body); margin-bottom: 18px; } .pane-list { list-style: none; margin-bottom: 20px; } .pane-list li { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); padding: 6px 0; border-bottom: 1px solid var(--mlk-line); } .pane-list li:last-child { border-bottom: none; } .keyword-directory { padding-block: 44px; background-color: var(--mlk-canvas-sink); border-bottom: 1px solid var(--mlk-line); } .keyword-dir-head { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-disabled); margin-bottom: 18px; } .keyword-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .keyword-col h3 { font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-secondary); margin-bottom: 6px; } .keyword-col p { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); line-height: 1.6; } .pricing-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; } .table-wrap { width: 100%; overflow-x: auto; } .gating-table, .glossary-table { width: 100%; border-collapse: collapse; text-align: start; border: 1px solid var(--mlk-line); } .gating-table thead tr, .glossary-table thead tr { background-color: var(--mlk-panel); } .gating-table tbody tr:nth-child(odd) { background-color: var(--mlk-canvas); } .gating-table tbody tr:nth-child(even) { background-color: var(--mlk-panel); } .gating-table th, .gating-table td, .glossary-table th, .glossary-table td { padding: 13px 16px; border-bottom: 1px solid var(--mlk-line); font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-spec); vertical-align: top; } .gating-table th, .glossary-table th { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-primary); border-bottom: 1px solid var(--mlk-border-active); } .cell-yes { color: var(--mlk-tx-secondary); font-weight: var(--mlk-fw-medium); } .cell-pro, .cell-highlight { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .cell-locked { color: var(--mlk-tx-disabled); } .pricing-loss-aversion { font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-body); max-width: var(--mlk-width-prose); color: var(--mlk-tx-secondary); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mlk-line); } .pro-checkout-pane { background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 28px; } .pro-tier-label { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); text-transform: uppercase; letter-spacing: var(--mlk-ls-mono); color: var(--mlk-accent); margin-bottom: 8px; } .pro-price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; } .pro-price-amount { font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); letter-spacing: var(--mlk-ls-hero); } .pro-price-period { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); } .price-value-sub { font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-regular); color: var(--mlk-tx-secondary); unicode-bidi: isolate; } .price-value-lead { unicode-bidi: isolate; overflow-wrap: anywhere; } [dir="rtl"] .hv-plan-amount { direction: rtl; } .pro-price-sub { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); margin-bottom: 18px; } .pro-highlights { list-style: none; margin-bottom: 20px; border-top: 1px solid var(--mlk-line); padding-top: 14px; } .pro-highlights li { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); margin-bottom: 8px; } .order-code-box { padding: 14px 0; border-top: 1px solid var(--mlk-line); margin-bottom: 14px; } .order-code-label { font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); margin-bottom: 8px; } .order-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .cmd-code, .order-code-val { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); color: var(--mlk-tx-primary); background-color: var(--mlk-canvas); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 6px 12px; user-select: all; } .btn-copy { background-color: var(--mlk-canvas-sink); color: var(--mlk-tx-primary); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 6px 12px; font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); cursor: pointer; } .btn-copy:hover { border-color: var(--mlk-accent); } .order-code-hint, .pricing-note { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin-top: 8px; } .order-code-status { margin-top: 10px; padding: 8px 12px; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-primary); background-color: var(--mlk-canvas-sink); border-inline-start: 2px solid var(--mlk-accent); } .waiver-label { display: flex; align-items: flex-start; gap: 10px; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin: 14px 0 18px; cursor: pointer; line-height: var(--mlk-lh-spec); } .waiver-label input { margin-top: 3px; accent-color: var(--mlk-accent); } .docs-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--mlk-line); } .doc-card { padding: 24px 0; border-bottom: 1px solid var(--mlk-line); } .doc-step-badge { display: inline-block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-semibold); color: var(--mlk-accent); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 2px 8px; margin-bottom: 8px; } .doc-card h3 { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); margin-bottom: 8px; } .doc-card p { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); } .glossary-section { background-color: var(--mlk-panel); border-bottom: 1px solid var(--mlk-line); padding-block: var(--mlk-gap-section); } .glossary-module-title { display: block; font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); margin-bottom: 4px; } .glossary-symptom { color: var(--mlk-tx-secondary); } .glossary-impact { color: var(--mlk-alert-error); } .glossary-remedy { color: var(--mlk-alert-pass); } .faq-stack { max-width: var(--mlk-width-prose); border-top: 1px solid var(--mlk-line); } .faq-item { padding: 22px 0; border-bottom: 1px solid var(--mlk-line); } .faq-q { font-size: var(--mlk-fs-badge); font-weight: var(--mlk-fw-semibold); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); margin-bottom: 8px; } .faq-a { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); } .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 880px; } .faq-card { background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); overflow: hidden; } .faq-card[open] { border-color: var(--mlk-accent); background-color: var(--mlk-canvas-sink); } .faq-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: var(--mlk-fs-body); font-weight: var(--mlk-fw-semibold); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); } .faq-summary::-webkit-details-marker { display: none; } .faq-summary::after { content: "+"; flex: none; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-medium); line-height: 1; color: var(--mlk-accent); } .faq-card[open] .faq-summary::after { content: "\2212"; } .faq-summary:hover, .faq-summary:focus-visible { background-color: var(--mlk-panel-hover); color: var(--mlk-tx-primary); } .faq-body { padding: 0 18px 16px; border-top: 1px solid var(--mlk-line); } .faq-body p { max-width: 76ch; margin: 12px 0 0; font-size: var(--mlk-fs-body); line-height: var(--mlk-lh-body); color: var(--mlk-tx-secondary); } .hv-scen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .hv-scen-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); } .hv-scen-tag { margin-bottom: 2px; font-size: var(--mlk-fs-micro); color: var(--mlk-accent); } .hv-scen-title { margin: 0; font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-primary); } .hv-scen-desc { max-width: none; margin: 0; font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-body); color: var(--mlk-tx-secondary); } .hv-cmp-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); background-color: var(--mlk-canvas); } .hv-cmp-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-snug); } .hv-cmp-table th, .hv-cmp-table td { padding: 12px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--mlk-line); color: var(--mlk-tx-secondary); } .hv-cmp-table thead th { background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); border-bottom: 1px solid var(--mlk-border-active); } .hv-cmp-table tbody tr:last-child th, .hv-cmp-table tbody tr:last-child td { border-bottom: none; } .hv-cmp-feat { width: 24%; min-width: 165px; color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .hv-cmp-table thead .hv-cmp-mlk-head { background-color: var(--mlk-accent-dim); color: var(--mlk-tx-primary); border-inline: 1px solid var(--mlk-accent); } .hv-cmp-table tbody .hv-cmp-mlk { width: 32%; min-width: 220px; background-color: var(--mlk-canvas-sink); color: var(--mlk-tx-primary); border-inline: 1px solid var(--mlk-border-active); } .hv-cmp-price { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .hv-cmp-hit { display: inline-flex; align-items: flex-start; gap: 8px; } .hv-cmp-check { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--mlk-alert-pass); } .hv-cmp-note { margin-top: 12px; } .footer { background-color: var(--mlk-panel); border-top: 1px solid var(--mlk-line); box-shadow: none; padding: 40px 0 32px; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin-top: auto; } .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--mlk-line); } .footer-links { display: flex; flex-wrap: wrap; gap: 18px; } .footer-links a { color: var(--mlk-tx-secondary); text-decoration: none; } .footer-links a:hover { color: var(--mlk-tx-primary); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--mlk-fs-micro); } .footer-legal { max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); color: var(--mlk-tx-secondary); } .footer-contact { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .footer-contact a { color: var(--mlk-accent); text-decoration: underline; text-underline-offset: 3px; } .legal-content { width: 100%; max-width: var(--mlk-width-site); margin-inline: auto; padding-inline: 28px; padding-block: 52px; } .legal-hero { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--mlk-line); } .meta-tag-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .meta-tag { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 4px 10px; text-decoration: none; } .legal-card { padding: 22px 0; border-bottom: 1px solid var(--mlk-line); } .legal-card:last-child { border-bottom: none; } .legal-card h2 { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); color: var(--mlk-tx-primary); margin-bottom: 10px; } .legal-card h3 { font-size: var(--mlk-fs-badge); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); margin: 14px 0 6px; } .legal-card p, .legal-card address { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); line-height: var(--mlk-lh-body); margin-bottom: 10px; font-style: normal; } .legal-card ul, .legal-card ol { margin-inline-start: 20px; margin-bottom: 10px; } .legal-card li { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); margin-bottom: 6px; } .feedback-form { margin-top: 16px; max-width: var(--mlk-width-prose); } .feedback-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .feedback-label { font-size: var(--mlk-fs-small); font-weight: var(--mlk-fw-medium); color: var(--mlk-tx-primary); } .feedback-select, .feedback-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-body); } .hp-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wasm-gh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .wasm-gh-chips-label { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } .wasm-gh-chip { appearance: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); cursor: pointer; } .wasm-gh-chip:hover, .wasm-gh-chip:focus-visible { border-color: var(--mlk-accent); color: var(--mlk-accent); } .feedback-textarea { width: 100%; padding: 12px; border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-family: var(--mlk-font-sans); font-size: var(--mlk-fs-body); } .feedback-actions { margin-top: 12px; } body:not(.preview-unlocked) > header, body:not(.preview-unlocked) > main, body:not(.preview-unlocked) > footer, body:not(.preview-unlocked) > #ccApp { display: none; } body:not(.preview-unlocked) > .coming-soon-gate { display: flex; } body.preview-unlocked > .coming-soon-gate { display: none; } .coming-soon-gate { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background-color: var(--mlk-canvas); color: var(--mlk-tx-primary); } .coming-soon-card { width: 100%; max-width: 680px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 44px 36px; text-align: start; } .coming-soon-brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); margin-bottom: 16px; } .coming-soon-brand .brand-icon { width: 44px; height: 44px; flex-shrink: 0; } .coming-soon-badge { display: inline-block; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 4px 10px; margin-bottom: 20px; } .coming-soon-title { font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); color: var(--mlk-tx-primary); line-height: var(--mlk-lh-tight); margin-bottom: 14px; } .coming-soon-desc { font-size: var(--mlk-fs-body); color: var(--mlk-tx-secondary); margin-bottom: 24px; } .coming-soon-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); padding-top: 16px; border-top: 1px solid var(--mlk-line); margin-bottom: 12px; } .coming-soon-meta a { color: var(--mlk-accent); text-decoration: underline; text-underline-offset: 3px; } .coming-soon-footer { font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); } [hidden] { display: none !important; } .scan-summary-box { background-color: var(--mlk-canvas); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 16px 18px; margin-bottom: 16px; min-height: 240px; contain-intrinsic-size: auto 240px; } .scan-summary-lead { font-size: var(--mlk-fs-body); color: var(--mlk-tx-primary); max-width: none; margin-bottom: 12px; } .scan-summary-list { list-style: none; display: flex; flex-direction: column; gap: 9px; } .scan-summary-list li { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); line-height: 1.5; padding-inline-start: 14px; border-inline-start: 2px solid var(--mlk-border-active); } .scan-summary-list li strong { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .scan-cta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .post-payment-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .order-discuss-link { align-self: center; font-size: var(--mlk-fs-small); color: var(--mlk-accent); text-decoration: underline; text-underline-offset: 3px; } .post-payment-box { border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); padding: 18px 16px; background-color: var(--mlk-canvas-sink); } .order-code-row { flex-wrap: wrap; } .order-code-big { flex: 1 1 100%; display: block; padding: 14px 16px; font-size: var(--mlk-fs-lead); font-weight: var(--mlk-fw-semibold); letter-spacing: 0.06em; text-align: center; overflow-wrap: anywhere; border-color: var(--mlk-accent); } .btn-copy-key { flex: 1 1 100%; } .order-code-copied { min-height: 1.4em; margin-top: 8px; padding-block: 4px; border-inline-start-color: var(--mlk-pass); background: none; } .order-code-copied:empty { visibility: hidden; } .order-workstation-bridge { max-width: none; margin: 10px 0 0; padding: 10px 12px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-inline-start: 3px solid var(--mlk-accent); border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-body); color: var(--mlk-tx-primary); } .mobile-buy-sub { max-width: none; margin: 0; font-size: var(--mlk-fs-small); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-secondary); text-align: center; } .est-footnote { max-width: none; margin-top: 14px; font-size: var(--mlk-fs-micro); line-height: var(--mlk-lh-snug); color: var(--mlk-tx-muted); } .est-mark { font-size: 0.75em; color: var(--mlk-tx-muted); text-transform: none; } .order-code-keep { font-size: var(--mlk-fs-small); color: var(--mlk-tx-primary); margin-top: 10px; } .order-dl-heading { font-size: var(--mlk-fs-body); font-weight: var(--mlk-fw-semibold); margin: 18px 0 10px; } .hv-dl-grid.order-dl-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; } @media (max-width: 560px) { .hv-dl-grid.order-dl-grid { grid-template-columns: 1fr; } } .order-dl-grid .hv-dl { display: flex; grid-row: auto; gap: 4px; padding: 14px 14px 16px; } .order-dl-grid .hv-dl .hv-card-title { font-size: var(--mlk-fs-body); } .order-dl-grid .hv-dl .hv-card-desc { margin-bottom: 4px; font-size: var(--mlk-fs-small); } .order-dl-grid .hv-dl-status { padding-block: 0; margin-bottom: 12px; } .order-dl-grid .btn-block { padding: 9px 10px; font-size: var(--mlk-fs-small); } .intercept-backdrop { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 16px; background-color: color-mix(in srgb, var(--mlk-canvas) 82%, transparent); } .intercept-backdrop[hidden] { display: none; } .intercept-dialog { width: 100%; max-width: 460px; padding: 24px 24px 20px; background-color: var(--mlk-panel); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-md); text-align: start; } .intercept-title { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); color: var(--mlk-tx-primary); margin-bottom: 10px; } .intercept-msg { max-width: none; font-size: var(--mlk-fs-body); line-height: var(--mlk-lh-body); color: var(--mlk-tx-secondary); margin-bottom: 20px; } .intercept-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } html.intercept-open { overflow: hidden; } .desktop-only-badge { display: inline-block; padding: 2px 9px; border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); background-color: var(--mlk-canvas); font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); font-weight: var(--mlk-fw-medium); letter-spacing: var(--mlk-ls-mono); color: var(--mlk-tx-secondary); } .clip-offscreen { position: fixed; inset-block-start: 0; inset-inline-start: -9999px; opacity: 0; } .mn-wrap { width: 100%; max-width: var(--mlk-width-site); margin-inline: auto; padding: 28px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; flex: 1; } .mn-toc { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; padding-inline-end: 8px; } .mn-toc-title { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-tx-disabled); letter-spacing: var(--mlk-ls-mono); text-transform: uppercase; margin-bottom: 8px; } .mn-toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; } .mn-toc a { display: block; padding: 4px 8px; font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); text-decoration: none; border-inline-start: 2px solid var(--mlk-line); } .mn-toc a:hover { color: var(--mlk-tx-primary); border-color: var(--mlk-accent); } .mn-toc .mn-l3 a { padding-inline-start: 20px; font-size: var(--mlk-fs-micro); } .mn-body { min-width: 0; } .mn-body h1 { font-size: var(--mlk-fs-hero); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-hero); line-height: var(--mlk-lh-tight); margin-bottom: 16px; } .mn-body h2 { font-size: var(--mlk-fs-h2); font-weight: var(--mlk-fw-semibold); letter-spacing: var(--mlk-ls-heading); margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--mlk-line); } .mn-body h3 { font-size: var(--mlk-fs-h3); font-weight: var(--mlk-fw-semibold); margin: 28px 0 10px; } .mn-body h4 { font-size: var(--mlk-fs-badge); font-weight: var(--mlk-fw-semibold); margin: 20px 0 8px; } .mn-body p, .mn-body li { color: var(--mlk-tx-secondary); max-width: var(--mlk-width-prose); margin-bottom: 10px; font-size: var(--mlk-fs-body); } .mn-body li > p { margin-bottom: 4px; } .mn-body strong { color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .mn-body ul, .mn-body ol { padding-inline-start: 22px; margin-bottom: 12px; } .mn-body code { font-family: var(--mlk-font-mono); font-size: 0.875em; background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 1px 5px; color: var(--mlk-tx-primary); overflow-wrap: anywhere; } .mn-body pre { background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-md); padding: 14px; overflow-x: auto; margin-bottom: 14px; } .mn-body pre code { background: none; border: none; padding: 0; font-size: var(--mlk-fs-small); white-space: pre; } .mn-body blockquote { border-inline-start: 3px solid var(--mlk-accent); padding: 4px 14px; margin-bottom: 12px; color: var(--mlk-tx-secondary); } .mn-body hr { border: none; border-top: 1px solid var(--mlk-line); margin: 24px 0; } .mn-table { overflow-x: auto; margin-bottom: 14px; } .mn-body table { border-collapse: collapse; width: 100%; font-size: var(--mlk-fs-small); } .mn-body th, .mn-body td { text-align: start; vertical-align: top; padding: 8px 10px; border: 1px solid var(--mlk-line); color: var(--mlk-tx-secondary); } .mn-body th { background-color: var(--mlk-panel); color: var(--mlk-tx-primary); font-weight: var(--mlk-fw-semibold); } .mn-note { color: var(--mlk-tx-disabled); font-size: var(--mlk-fs-small); margin-bottom: 16px; } [dir="rtl"] .mn-body pre { direction: ltr; text-align: left; unicode-bidi: isolate; } [dir="rtl"] .mn-body code { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after { letter-spacing: normal !important; } html[dir="rtl"] :is(.eyebrow, .hero-badge, .hero-lang-label, .header-price-badge, .pro-tier-label, .gating-table th, .glossary-table th, .doc-step-badge, .meta-tag, .coming-soon-badge, .mn-toc-title) { font-family: var(--mlk-font-sans); text-transform: none; } h1, h2, h3, .hero-title, .section-title, .mn-body a, .mn-body li, .legal-content a { overflow-wrap: anywhere; } @media (max-width: 1080px) { .mn-wrap { grid-template-columns: 1fr; padding: 18px; } .mn-toc { position: static; max-height: 260px; } } @media (max-width: 960px) { .header { position: static; } .header-inner { gap: 10px; } .nav-links { order: 3; width: 100%; flex-wrap: nowrap; gap: 20px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .nav-links a { white-space: nowrap; } .nav-controls { margin-inline-start: auto; } .header-price-badge { display: none; } .hero-split, .capabilities-grid, .viewport-body, .stack-rows, .security-offer-grid, .keyword-cols, .pricing-split, .hv-scen-grid { grid-template-columns: 1fr; } .cap-cell { border-inline-end: none; border-bottom: 1px solid var(--mlk-line); } .cap-cell:last-child { border-bottom: none; } .stack-row { border-inline-end: none; border-bottom: 1px solid var(--mlk-line); } .stack-row:last-child { border-bottom: none; } .viewport-score-pane, .security-pane { border-inline-end: none; border-bottom: 1px solid var(--mlk-line); } .eco-row { grid-template-columns: 1fr; } .eco-label { border-inline-end: none; border-bottom: 1px solid var(--mlk-line); } } @media (max-width: 768px) { :root { --mlk-fs-body: 1rem; --mlk-fs-small: 0.875rem; --mlk-fs-micro: 0.875rem; } .container, .legal-content { padding-inline: 16px; } code, kbd, samp, html .mn-body code { font-size: max(14px, 0.875em); } .mn-body pre code, .mn-body pre { font-size: 0.875rem; } pre { max-width: 100%; overflow-x: auto; } .brand { min-height: 48px; min-width: 48px; } .nav-links { gap: 8px; } .nav-controls, .meta-tag-strip, .order-code-row, .intercept-actions, .mobile-hero-actions, .mobile-share { gap: 10px; } .nav-links a, .nav-connect-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 10px; min-height: 48px; min-width: 48px; box-sizing: border-box; } .lang-select { min-height: 48px; min-width: 48px; font-size: 1rem; } .header-price-badge, .btn, .btn-copy, .meta-tag, #btnCopyOrderCode, #btnInterceptCancel, #btnInterceptProceed { min-height: 48px; min-width: 48px; } .btn { max-width: 100%; white-space: normal; text-align: center; } a.meta-tag { display: inline-flex; align-items: center; justify-content: center; } .footer-links { gap: 8px 12px; } .mn-toc ul { gap: 8px; } .footer-links a, .footer-legal a, .footer-contact a, .coming-soon-meta a, .mn-toc a, .mn-note a, .order-discuss-link { display: inline-flex; align-items: center; justify-content: center; padding-block: 12px; min-height: 48px; min-width: 48px; box-sizing: border-box; text-align: center; } .mn-toc a { justify-content: flex-start; text-align: start; } .legal-card p > a:only-child, .mn-body li > a:only-child, .mn-body strong > a:only-child { display: inline-flex; align-items: center; padding-block: 12px; min-height: 48px; min-width: 48px; box-sizing: border-box; } .waiver-label { min-height: 48px; gap: 10px; } .waiver-label input[type="checkbox"] { width: 24px; height: 24px; flex: none; } } .agent-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 16px 24px; } .agent-cap-card { background-color: var(--mlk-panel); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 18px 20px; } .agent-cap-card h3 { font-size: var(--mlk-fs-body); font-weight: var(--mlk-fw-semibold); color: var(--mlk-tx-primary); margin: 6px 0 8px; } .agent-cap-card p { font-size: var(--mlk-fs-small); color: var(--mlk-tx-secondary); line-height: var(--mlk-lh-body); margin: 0; } .agent-code-block { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-small); line-height: 1.55; color: var(--mlk-tx-primary); background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-border-active); border-radius: var(--mlk-radius-sm); padding: 16px 20px; margin-block: 12px 18px; overflow-x: auto; max-width: 100%; } .dispatch-sheet-dialog { max-width: 660px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; } .dispatch-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .dispatch-sheet-meta { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-accent); margin: 8px 0 12px; } .dispatch-gui-row { padding-top: 10px; border-top: 1px solid var(--mlk-line); margin-top: 10px; font-size: var(--mlk-fs-small); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .dispatch-gui-row a, .link-btn { color: var(--mlk-accent); text-decoration: underline; } .link-btn { background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; } #instructionSheetDialog label, #instructionSheetDialog > span { display: block; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); margin: 6px 0 5px; } #instructionSheetDialog pre { background-color: var(--mlk-canvas-sink); border: 1px solid var(--mlk-line); border-radius: var(--mlk-radius-sm); padding: 10px 12px; font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); white-space: pre-wrap; user-select: all; margin: 0 0 8px; overflow-x: auto; } #instructionSheetDialog .ds-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .dispatch-note, #instructionSheetDialog > p { margin: 4px 0 0; font-size: var(--mlk-fs-micro); color: var(--mlk-tx-secondary); } #dispatchSheetMeta { font-family: var(--mlk-font-mono); font-size: var(--mlk-fs-micro); color: var(--mlk-accent); margin: 8px 0 12px; } .dual-rail-partial-banner { padding: 10px 12px; margin-bottom: 12px; background-color: var(--mlk-canvas); border: 1px solid var(--mlk-accent); border-radius: var(--mlk-radius-sm); font-size: var(--mlk-fs-small); color: var(--mlk-tx-primary); } .dual-rail-copy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } @media (max-width: 768px) { .agent-cap-grid, .wasm-github-row { grid-template-columns: minmax(0, 1fr); } .wasm-github-input, .feedback-select, .feedback-input { min-height: 48px; font-size: 1rem; } .wasm-gh-chip { min-height: 48px; min-width: 48px; } } @media print { body, main, .mn-body, .section, .viewport-showcase, .viewport-score-pane, .viewport-prompt-pane, .scan-summary-box { background-color: white !important; color: black !important; } .header, .hero, .mn-toc, .wasm-dropzone, .wasm-github-bar, .scan-cta-bar, #capabilities, #scenarios, #comparison, #faq, #stacks, #security-offer, .hv-support-section, .keyword-directory, .coming-soon-gate, .footer { display: none !important; } .viewport-showcase { border: 1px solid black !important; max-width: 100% !important; margin-bottom: 12px !important; } }