:root {
  --bg: #101111;
  --panel: #171918;
  --panel-2: #1d201f;
  --line: #343735;
  --line-light: #4d514e;
  --text: #f1f0e9;
  --muted: #9ca19c;
  --subtle: #686d68;
  --acid: #d7ff4f;
  --acid-dim: #b7d83f;
  --danger: #ff7e63;
  --mono: "DM Mono", "Cascadia Code", Consolas, monospace;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--sans); overflow-x: clip; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.shell { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 92px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: -0.7px; }
.brand-mark { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--acid); color: var(--acid); font-size: 14px; font-weight: 500; }
.muted-dot { color: var(--acid); }
.nav-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.status-light { width: 6px; height: 6px; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.nav-links { display: flex; align-items: center; gap: 21px; margin-left: auto; }
.nav-link { color: var(--muted); font: 11px var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .07em; }
.nav-link:hover { color: var(--acid); }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 86px; padding: 108px 0 123px; align-items: center; }
.eyebrow, .section-kicker { color: var(--acid); margin: 0 0 22px; font: 11px var(--mono); letter-spacing: .11em; }
.eyebrow { display: flex; gap: 10px; align-items: center; }
.eyebrow span { height: 1px; width: 26px; background: var(--acid); }
.hero h1 { margin: 0; max-width: 620px; font-size: clamp(3.5rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -0.07em; font-weight: 800; }
.hero h1 em { color: var(--acid); font-style: normal; }
.hero-text { max-width: 512px; margin: 31px 0 21px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.local-note { color: var(--subtle); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.tiny-bracket { color: var(--acid); }

.terminal-card { position: relative; min-height: 302px; border: 1px solid var(--line-light); background: #151716; box-shadow: 12px 12px 0 #0a0b0b; font-family: var(--mono); overflow: visible; }
.card-topline { height: 43px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 15px; color: #d3d4ce; font-size: 11px; }
.card-topline > span:first-child { display: flex; gap: 4px; }
.card-topline i { display: block; width: 6px; height: 6px; border: 1px solid #60655f; border-radius: 50%; }
.file-type { margin-left: auto; color: var(--subtle); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.terminal-code { padding: 19px 18px 28px; font-size: 11px; line-height: 1.95; color: var(--muted); }
.line-no { width: 29px; display: inline-block; color: #50554f; user-select: none; }
.token-dim { color: #c2c5ba; }.token-white { color: var(--text); }.token-green { color: var(--acid); }
.export-chip { position: absolute; right: -21px; bottom: -19px; display: flex; gap: 9px; align-items: center; padding: 11px 13px; background: var(--acid); color: #171918; border: 1px solid #ebff9b; font: 10px var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .035em; }
.export-chip span { font-size: 14px; }

.import-section { padding: 78px 0 102px; border-top: 1px solid var(--line); }
.section-heading { max-width: 560px; }
.section-kicker { margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -0.055em; line-height: 1.1; }
.section-heading > p:last-child { color: var(--muted); margin: 16px 0 35px; font-size: 14px; }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.import-card { position: relative; min-height: 282px; padding: 28px; border: 1px solid var(--line); background: var(--panel); transition: border .2s, transform .2s, background .2s; }
.import-card:hover, .import-card.is-dragging { border-color: var(--acid-dim); background: var(--panel-2); transform: translate(-3px, -3px); }
.card-index { position: absolute; top: 18px; right: 19px; color: var(--subtle); font: 11px var(--mono); }
.card-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-light); color: var(--acid); font: 18px var(--mono); }
.import-card h3 { margin: 28px 0 8px; font-size: 18px; letter-spacing: -0.035em; }.import-card p { color: var(--muted); margin: 0; max-width: 390px; font-size: 13px; line-height: 1.65; }
code { font-family: var(--mono); color: #e3e5dc; font-size: .92em; }
.url-input-wrap { display: flex; gap: 8px; margin-top: 24px; border-bottom: 1px solid var(--line-light); }
.url-input-wrap:focus-within { border-color: var(--acid); }
.url-input-wrap input { min-width: 0; flex: 1; padding: 10px 0 11px; border: 0; outline: 0; color: var(--text); background: transparent; font: 11px var(--mono); }
.url-input-wrap input::placeholder { color: var(--subtle); opacity: 1; }.arrow-button { width: 30px; height: 30px; align-self: center; border: 1px solid var(--acid); background: var(--acid); color: #151716; font-size: 17px; line-height: 1; }
.arrow-button:hover { background: #ecff9c; }.outline-button { display: flex; align-items: center; gap: 20px; margin-top: 25px; padding: 10px 12px; border: 1px solid var(--line-light); background: transparent; color: var(--text); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.outline-button span { color: var(--acid); font-size: 16px; }.outline-button:hover { border-color: var(--acid); color: var(--acid); }
.form-message { min-height: 18px; margin-top: 9px !important; font: 10px var(--mono) !important; }.form-message.error { color: var(--danger); }.form-message.success { color: var(--acid); }

.workflow { padding: 76px 0 100px; border-top: 1px solid var(--line); }.compact-heading { max-width: 700px; }.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border: 1px solid var(--line); }.workflow-grid article { padding: 27px; min-height: 175px; border-right: 1px solid var(--line); }.workflow-grid article:last-child { border-right: 0; }.workflow-number { color: var(--acid); font: 11px var(--mono); }.workflow-grid h3 { margin: 28px 0 9px; font-size: 15px; letter-spacing: -.025em; }.workflow-grid p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.proof-strip div { min-height: 72px; padding: 0 18px; display: flex; gap: 12px; align-items: center; border-right: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .045em; }.proof-strip div:last-child { border: 0; }.proof-symbol { color: var(--acid); font-size: 17px; }
.site-footer { min-height: 89px; color: var(--subtle); display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.site-footer nav { display: flex; gap: 15px; }.site-footer a { color: var(--muted); text-decoration: none; }.site-footer a:hover { color: var(--acid); }

.hidden { display: none !important; }.editor-shell { min-height: 100vh; background: #101111; }.editor-topbar { height: 63px; display: flex; align-items: center; border-bottom: 1px solid var(--line); padding: 0 22px; }.editor-brand { border: 0; background: none; }.document-name { display: flex; align-items: center; gap: 8px; margin: 0 auto; color: #d8d9d2; font: 11px var(--mono); }.document-dot { width: 7px; height: 7px; border: 1px solid var(--acid); }.saved-state { color: var(--subtle); padding-left: 9px; border-left: 1px solid var(--line); font-size: 9px; text-transform: uppercase; }.editor-actions { display: flex; gap: 12px; }.text-button { border: 0; background: transparent; color: var(--muted); font: 11px var(--mono); }.text-button:hover { color: var(--acid); }.export-button { padding: 10px 14px; border: 1px solid var(--acid); background: var(--acid); color: #151716; font: 11px var(--mono); font-weight: 500; }.export-button:hover { background: #edffa3; }.export-button span { margin-right: 6px; }
.mobile-workspace-tabs { display: none; }
.editor-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(100vh - 95px); }.pane { min-width: 0; display: flex; flex-direction: column; }.source-pane { background: #121413; border-right: 1px solid var(--line); }.pane-label { height: 42px; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--subtle); font: 10px var(--mono); letter-spacing: .1em; }.live-indicator { color: var(--acid); }.live-indicator i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: var(--acid); }.source-pane textarea { width: 100%; flex: 1; resize: none; border: 0; outline: 0; padding: 23px 22px; background: transparent; color: #d8d9d2; font: 13px/1.7 var(--mono); tab-size: 2; }.preview-pane { overflow: hidden; background: #171918; }.markdown-body { flex: 1; overflow: auto; padding: 32px 40px 80px; color: #dbdcd5; font-size: 15px; line-height: 1.75; }.markdown-body > * { max-width: 740px; }.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #f2f2eb; letter-spacing: -.045em; line-height: 1.15; }.markdown-body h1 { margin: 0 0 25px; font-size: 2.5em; }.markdown-body h2 { margin-top: 2.1em; font-size: 1.6em; border-bottom: 1px solid var(--line); padding-bottom: .45em; }.markdown-body h3 { margin-top: 1.8em; font-size: 1.18em; }.markdown-body p, .markdown-body ul, .markdown-body ol { margin: 1em 0; }.markdown-body a { color: var(--acid); }.markdown-body code { padding: .12em .35em; background: #0d0f0e; color: #e7e8df; }.markdown-body pre { overflow: auto; padding: 18px; border: 1px solid var(--line); background: #0d0f0e; }.markdown-body pre code { padding: 0; background: none; }.markdown-body blockquote { margin: 1.3em 0; padding: 1px 18px; border-left: 3px solid var(--acid); color: var(--muted); }.markdown-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9em; }.markdown-body th, .markdown-body td { padding: 9px 11px; text-align: left; border: 1px solid var(--line); }.markdown-body th { color: var(--acid); background: #121413; }.markdown-body img { max-width: 100%; }.shortcut-bar { height: 32px; padding: 0 20px; display: flex; align-items: center; gap: 23px; border-top: 1px solid var(--line); color: var(--subtle); font: 9px var(--mono); }.shortcut-bar kbd { color: var(--muted); font: inherit; border: 1px solid var(--line-light); padding: 1px 3px; }.shortcut-bar #editor-toast { margin-left: auto; color: var(--acid); }

@media (max-width: 760px) { .shell { width: min(100% - 32px, 1200px); }.topbar { height: 70px; }.nav-status { display: none; }.hero { grid-template-columns: 1fr; gap: 55px; padding: 70px 0 80px; }.hero h1 { font-size: clamp(3rem, 15vw, 4.7rem); }.terminal-card { width: calc(100% - 12px); margin-left: 0; }.import-section, .workflow { padding: 60px 0; }.import-grid, .workflow-grid, .proof-strip { grid-template-columns: 1fr; }.workflow-grid article, .proof-strip div { border-right: 0; border-bottom: 1px solid var(--line); }.workflow-grid article:last-child, .proof-strip div:last-child { border-bottom: 0; }.proof-strip { margin-bottom: 0; }.proof-strip div { min-height: 57px; } footer { min-height: 74px; font-size: 8px; }.editor-topbar { padding: 0 12px; }.document-name { display: none; }.editor-actions { margin-left: auto; }.editor-area { grid-template-columns: 1fr; height: auto; }.pane { height: calc(50vh - 48px); }.source-pane { border-right: 0; border-bottom: 1px solid var(--line); }.markdown-body { padding: 25px 20px 65px; }.shortcut-bar { display: none; } }

.legal-page { min-height: 100vh; background: var(--bg); }.legal-page .shell { min-height: 100vh; display: flex; flex-direction: column; }.legal-page .topbar { flex: 0 0 auto; }.legal-main { width: min(840px, 100%); padding: 82px 0 92px; }.legal-kicker { margin: 0 0 20px; color: var(--acid); font: 11px var(--mono); letter-spacing: .1em; }.legal-title { max-width: 760px; margin: 0; color: var(--text); font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.065em; }.legal-lede { max-width: 690px; margin: 27px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }.legal-meta { display: flex; gap: 16px; margin: 33px 0 47px; color: var(--subtle); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }.legal-meta span + span { padding-left: 16px; border-left: 1px solid var(--line); }.legal-layout { display: grid; grid-template-columns: 178px minmax(0, 1fr); align-items: start; gap: 53px; }.legal-toc { position: sticky; top: 22px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.legal-toc span { display: block; margin-bottom: 11px; color: var(--subtle); font: 10px var(--mono); letter-spacing: .08em; }.legal-toc a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 12px; }.legal-toc a:hover { color: var(--acid); }.legal-content { min-width: 0; }.legal-content section { padding: 0 0 39px; margin-bottom: 39px; border-bottom: 1px solid var(--line); }.legal-content section:last-child { margin-bottom: 0; }.legal-content h2 { margin: 0 0 16px; color: var(--text); font-size: 22px; letter-spacing: -.045em; }.legal-content h3 { margin: 25px 0 10px; color: #dedfd7; font-size: 15px; letter-spacing: -.025em; }.legal-content p, .legal-content li { color: var(--muted); font-size: 14px; line-height: 1.8; }.legal-content p { margin: 0 0 14px; }.legal-content ul { padding-left: 19px; margin: 0 0 14px; }.legal-content a { color: var(--acid); text-decoration-thickness: 1px; text-underline-offset: 3px; }.notice-card { padding: 20px; margin: 0 0 32px; border: 1px solid var(--acid-dim); background: #171a16; }.notice-card strong { display: block; margin-bottom: 8px; color: var(--acid); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.notice-card p { margin: 0; color: #c7c9c0; font-size: 13px; }.contact-card { padding: 27px; margin: 0 0 31px; border: 1px solid var(--line-light); background: var(--panel); }.contact-card p { margin-bottom: 12px; }.email-row { display: flex; align-items: center; gap: 10px; margin-top: 19px; font: 12px var(--mono); }.email-row > span:first-child { color: var(--subtle); text-transform: uppercase; letter-spacing: .07em; }.email-blank { display: inline-block; min-width: 240px; height: 20px; border-bottom: 1px dashed var(--acid-dim); }.support-email-link { color: var(--acid); font-family: var(--mono); overflow-wrap: anywhere; }.contact-note { color: var(--subtle) !important; font-size: 11px !important; }.legal-page .site-footer { margin-top: auto; border-top: 1px solid var(--line); }

@media (max-width: 760px) { .nav-links { gap: 13px; }.nav-links .nav-link:first-child { display: none; }.legal-main { padding: 59px 0 62px; }.legal-layout { grid-template-columns: 1fr; gap: 27px; }.legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 0 15px; padding: 13px 0; }.legal-toc span { width: 100%; }.legal-toc a { padding: 3px 0; }.legal-content section { padding-bottom: 31px; margin-bottom: 31px; }.site-footer { min-height: auto; padding: 25px 0; flex-wrap: wrap; }.site-footer nav { width: 100%; gap: 13px; } }

@media (max-width: 1080px) and (min-width: 761px) { .shell { width: min(100% - 48px, 1200px); }.hero { gap: 48px; padding: 84px 0 96px; }.hero h1 { font-size: clamp(3.7rem, 7vw, 4.8rem); }.terminal-card { min-height: 275px; }.import-section, .workflow { padding-top: 68px; padding-bottom: 78px; }.legal-main { width: min(100%, 840px); }.legal-layout { grid-template-columns: 154px minmax(0, 1fr); gap: 35px; } }

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 1200px); }
  .topbar { height: 68px; gap: 12px; }
  .brand { font-size: 16px; }
  .nav-links { gap: 5px; }
  .nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px; font-size: 9px; }
  .hero { gap: 47px; padding: 56px 0 73px; }
  .eyebrow { margin-bottom: 17px; }
  .hero h1 { font-size: clamp(2.85rem, 14vw, 4.3rem); line-height: 1; }
  .hero-text { margin: 25px 0 18px; font-size: 15px; line-height: 1.72; }
  .local-note { font-size: 10px; line-height: 1.7; }
  .terminal-card { min-height: 248px; box-shadow: 8px 8px 0 #0a0b0b; overflow: hidden; }
  .terminal-code { padding: 16px 13px 28px; font-size: 10px; overflow-x: auto; }
  .line-no { width: 25px; }
  .export-chip { right: 10px; bottom: 10px; padding: 8px 10px; font-size: 9px; }
  .import-section, .workflow { padding: 52px 0 62px; }
  .section-heading > p:last-child { margin-bottom: 27px; }
  .import-card { min-height: 0; padding: 24px; }
  .import-card h3 { margin-top: 23px; }
  .url-input-wrap input { min-height: 44px; padding: 11px 0; font-size: 16px; }
  .url-input-wrap input::placeholder { font-size: 10px; }
  .arrow-button { width: 44px; height: 44px; }
  .outline-button { min-height: 44px; margin-top: 21px; padding: 11px 13px; }
  .workflow-grid { margin-top: 33px; }
  .workflow-grid article { min-height: 0; padding: 24px; }
  .proof-strip div { min-height: 60px; padding: 0 14px; }
  .site-footer { gap: 16px; font-size: 9px; }
  .site-footer > span:nth-child(2) { width: 100%; order: 3; }
  .site-footer nav { gap: 8px 14px; flex-wrap: wrap; }

  .editor-topbar { height: 58px; padding: 0 12px; }
  .editor-brand { padding: 0; }
  .editor-actions { gap: 4px; }
  .text-button { min-width: 44px; min-height: 44px; }
  .export-button { min-height: 42px; padding: 10px 11px; }
  .mobile-workspace-tabs { height: 46px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: #121413; }
  .mobile-pane-tab { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--subtle); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .mobile-pane-tab:last-child { border-right: 0; }
  .mobile-pane-tab.is-active { color: var(--acid); background: #171918; box-shadow: inset 0 -2px 0 var(--acid); }
  .editor-area { display: block; height: calc(100dvh - 104px); min-height: 0; }
  .pane { display: none; height: 100%; }
  .editor-area[data-mobile-pane="source"] .source-pane, .editor-area[data-mobile-pane="preview"] .preview-pane { display: flex; }
  .source-pane { border-right: 0; }
  .pane-label { height: 39px; padding: 0 14px; }
  .source-pane textarea { padding: 17px 15px; font-size: 15px; line-height: 1.65; }
  .markdown-body { padding: 24px 18px 50px; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
  .markdown-body h1 { font-size: 2.1em; }
  .markdown-body h2 { font-size: 1.45em; }
  .markdown-body pre { padding: 14px; font-size: .84em; }
  .markdown-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .shortcut-bar { display: none; }

  .legal-main { padding: 52px 0 58px; }
  .legal-title { font-size: clamp(2.65rem, 13.5vw, 3.8rem); line-height: 1.02; }
  .legal-lede { margin-top: 21px; font-size: 15px; line-height: 1.7; }
  .legal-meta { flex-wrap: wrap; gap: 8px; margin: 27px 0 35px; line-height: 1.55; }
  .legal-meta span + span { padding-left: 0; border-left: 0; }
  .legal-toc { gap: 4px 14px; }
  .legal-toc a { min-height: 32px; display: inline-flex; align-items: center; }
  .legal-content h2 { font-size: 21px; }
  .legal-content p, .legal-content li { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
  .notice-card, .contact-card { padding: 18px; }
  .email-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .email-blank { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .shell { width: min(100% - 24px, 1200px); }
  .nav-links .nav-link:nth-child(2) { display: none; }
  .nav-links { gap: 0; }
  .topbar { gap: 7px; }
  .hero h1 { font-size: clamp(2.6rem, 13.4vw, 3.3rem); }
  .editor-actions .text-button { display: none; }
  .export-button { font-size: 10px; }
  .terminal-code { font-size: 9px; }
  .site-footer { padding-left: 0; padding-right: 0; }
}

@media (pointer: coarse) { .nav-link, .legal-toc a { -webkit-tap-highlight-color: transparent; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media print { body { background: white; } .editor-topbar, .source-pane, .shortcut-bar, .pane-label { display: none !important; } .editor-shell, .editor-area, .preview-pane { display: block !important; height: auto !important; background: white !important; } .markdown-body { color: #161616 !important; padding: 0 !important; overflow: visible !important; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { color: #111 !important; } .markdown-body h2 { border-color: #ccc !important; } .markdown-body a { color: #111 !important; text-decoration: underline; } .markdown-body pre, .markdown-body code { color: #111 !important; background: #f1f1f1 !important; border-color: #ddd !important; } }
