@import "tailwindcss"; :root { --bg-canvas: #f0f0f0; --bg-primary: #ffffff; --bg-secondary: #fafafc; --bg-tertiary: #f0f0f4; --text-primary: #333333; --text-secondary: #666666; --text-muted: #888888; --border-color: #e0e0e0; --link-color: var(--text-primary); --link-visited: var(--text-secondary); --accent: #333333; --accent-muted: #666666; --background: 0 0% 100%; --foreground: 0 0% 20%; --card: 240 20% 99%; --card-foreground: 0 0% 20%; --popover: 0 0% 100%; --popover-foreground: 0 0% 20%; --primary: 0 0% 20%; --primary-foreground: 0 0% 100%; --secondary: 240 20% 98%; --secondary-foreground: 0 0% 20%; --muted: 240 20% 98%; --muted-foreground: 0 0% 53%; --accent: 240 20% 98%; --accent-foreground: 0 0% 20%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 0 0% 88%; --input: 0 0% 88%; --ring: 0 0% 20%; --radius: 0.125rem; --topbar-height: 48px; --font-body: system-ui, -apple-system, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-sans: system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace;} .dark { --bg-canvas: hsl(0 0% 5%); --bg-primary: hsl(0 0% 9%); --bg-secondary: hsl(0 0% 12%); --bg-tertiary: hsl(0 0% 16%); --text-primary: hsl(0 0% 100%); --text-secondary: hsl(0 0% 75%); --text-muted: hsl(0 0% 50%); --border-color: hsl(0 0% 20%); --link-color: var(--text-primary); --link-visited: var(--text-secondary); --accent: hsl(0 0% 100%); --accent-muted: hsl(0 0% 75%); --background: 0 0% 9%; --foreground: 0 0% 100%; --card: 0 0% 9%; --card-foreground: 0 0% 100%; --popover: 0 0% 9%; --popover-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 12%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 12%; --muted-foreground: 0 0% 50%; --accent: 0 0% 12%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 0% 100%;} @theme inline { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground)); --color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); --radius: var(--radius); --font-sans: var(--font-sans); --font-mono: var(--font-mono);} * { box-sizing: border-box;} html { scroll-behavior: smooth;} body { --font-body: var(--font-geist-sans), system-ui, -apple-system, sans-serif; --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif; --font-mono: var(--font-geist-mono), "JetBrains Mono", "Fira Code", Menlo, monospace; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); line-height: 1.7;} ::-webkit-scrollbar { width: 8px; height: 8px;} ::-webkit-scrollbar-track { background: var(--bg-secondary);} ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px;} ::-webkit-scrollbar-thumb:hover { background: var(--text-muted);} a { color: inherit; text-decoration: none;} a:hover { text-decoration: none;} button,input { font: inherit;} .math-display { display: block; font-family: var(--font-mono); overflow-x: auto; white-space: nowrap;} .math-display-inline { display: inline; overflow: visible; white-space: normal;} .math-display-block { border: 1px solid var(--surface-line, var(--border-color)); border-radius: 8px; color: var(--surface-strong, var(--text-primary)); margin: 22px 0; padding: 16px 18px;} .math-display-render { display: none;} .auth-shell { align-items: center; background: #080808; display: flex; justify-content: center; min-height: 100vh; padding: 28px;} .surface-nav { align-items: center; display: flex; justify-content: space-between; margin: 0 0 48px;} .surface-brand { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase;} .surface-nav-links { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;} .surface-nav-links a,.surface-theme-toggle,.surface-auth-button { align-items: center; background: transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font-family: var(--font-mono); font-size: 12px; height: 36px; justify-content: center; line-height: 1; padding: 0 14px; text-decoration: none; text-transform: uppercase;} .surface-theme-toggle { padding: 0; width: 36px;} .surface-user-avatar { height: 36px; width: 36px;} .surface-user-popover { border-radius: 8px;} .surface-nav-dark .surface-brand { color: var(--surface-strong, #f4f2ee);} .surface-nav-dark .surface-nav-links a,.surface-nav-dark .surface-theme-toggle,.surface-nav-dark .surface-auth-button { border: 1px solid var(--surface-line, #dedede); color: var(--surface-muted, #aaa);} .surface-nav-dark .surface-nav-links a:hover,.surface-nav-dark .surface-theme-toggle:hover,.surface-nav-dark .surface-auth-button:hover { border-color: var(--surface-muted, #666); color: var(--surface-strong, #f4f2ee);} .surface-nav-light .surface-brand { color: var(--surface-strong, #333);} .dark .surface-nav-light .surface-brand { color: var(--surface-strong, #fff);} .surface-nav-light .surface-nav-links a,.surface-nav-light .surface-theme-toggle,.surface-nav-light .surface-auth-button { border: 1px solid var(--surface-line, #dedede); color: var(--surface-muted, #555);} .surface-nav-light .surface-nav-links a:hover,.surface-nav-light .surface-theme-toggle:hover,.surface-nav-light .surface-auth-button:hover { border-color: var(--surface-muted, #777); color: var(--surface-strong, #333);} .dark .surface-nav-light .surface-nav-links a,.dark .surface-nav-light .surface-theme-toggle,.dark .surface-nav-light .surface-auth-button { border-color: var(--surface-line, #2a2a2a); color: var(--surface-muted, #aaa);} .dark .surface-nav-light .surface-nav-links a:hover,.dark .surface-nav-light .surface-theme-toggle:hover,.dark .surface-nav-light .surface-auth-button:hover { border-color: var(--surface-muted, #666); color: var(--surface-strong, #fff);} @media (max-width: 900px) { .surface-nav { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 38px; } .surface-nav-links { justify-content: flex-start; }} .sumtex-dark-shell { min-height: calc(100vh - var(--topbar-height)); background: #080808; color: #f4f2ee;} .ma-shell { min-height: calc(100vh - var(--topbar-height)); background: #080808; color: #f4f2ee; padding: 34px 5vw 56px;} .ma-frame { margin: 0 auto; max-width: 1440px;} .ma-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 0 0 46px;} .ma-kicker { color: #777; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; line-height: 1; margin: 0 0 22px; text-transform: uppercase;} .ma-title { color: #f5f3ef; font-size: clamp(44px, 6vw, 92px); font-weight: 400; letter-spacing: 0; line-height: 0.95; margin: 0;} .ma-subtitle { color: #8d8d8d; font-size: 18px; line-height: 1.5; margin: 22px 0 0; max-width: 620px;} .ma-primary-action { align-items: center; background: transparent; border: 1px solid #3a3a3a; border-radius: 999px; color: #f1eee8; cursor: pointer; display: inline-flex; font-family: var(--font-mono); font-size: 13px; font-weight: 600; justify-content: center; letter-spacing: 0.14em; min-height: 54px; padding: 0 28px; text-transform: uppercase; transition: border-color 0.2s ease, background 0.2s ease; white-space: nowrap;} .ma-primary-action:hover { background: #151515; border-color: #686868;} .ma-layout { align-items: start; display: grid; gap: 44px; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);} .ma-rail { border-left: 1px solid #242424; display: flex; flex-direction: column; gap: 32px; padding-left: 26px;} .ma-group { display: grid; gap: 12px;} .ma-label { color: #777; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase;} .ma-category-list { display: grid; gap: 1px;} .ma-line-option,.ma-toggle-row,.ma-number-row { background: transparent; border: 0; border-bottom: 1px solid #1d1d1d; color: #d8d5ce; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; min-height: 46px; padding: 12px 0; text-align: left;} .ma-line-option:hover,.ma-line-option.active { color: #fff;} .ma-line-option.active .ma-option-name::before { background: #f4f2ee;} .ma-option-name { align-items: center; display: inline-flex; font-size: 15px; gap: 10px;} .ma-option-name::before { background: #363636; border-radius: 999px; content: ""; display: inline-block; height: 7px; width: 7px;} .ma-option-meta { color: #6f6f6f; font-size: 12px; max-width: 130px; text-align: right;} .ma-pill-row { display: flex; flex-wrap: wrap; gap: 8px;} .ma-pill { background: transparent; border: 1px solid #343434; border-radius: 999px; color: #b8b4ad; cursor: pointer; font-family: var(--font-mono); font-size: 12px; min-height: 36px; padding: 0 14px; text-transform: uppercase;} .ma-pill.active { background: #f1eee8; border-color: #f1eee8; color: #080808;} .ma-stage { border-left: 1px solid #242424; min-height: 650px;Lines 1–500 of 879. Load more
@import "tailwindcss"; :root { --bg-canvas: #f0f0f0; --bg-primary: #ffffff; --bg-secondary: #fafafc; --bg-tertiary: #f0f0f4; --text-primary: #333333; --text-secondary: #666666; --text-muted: #888888; --border-color: #e0e0e0; --link-color: var(--text-primary); --link-visited: var(--text-secondary); --accent: #333333; --accent-muted: #666666; --background: 0 0% 100%; --foreground: 0 0% 20%; --card: 240 20% 99%; --card-foreground: 0 0% 20%; --popover: 0 0% 100%; --popover-foreground: 0 0% 20%; --primary: 0 0% 20%; --primary-foreground: 0 0% 100%; --secondary: 240 20% 98%; --secondary-foreground: 0 0% 20%; --muted: 240 20% 98%; --muted-foreground: 0 0% 53%; --accent: 240 20% 98%; --accent-foreground: 0 0% 20%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 0 0% 88%; --input: 0 0% 88%; --ring: 0 0% 20%; --radius: 0.125rem; --topbar-height: 48px; --font-body: system-ui, -apple-system, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-sans: system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Menlo, monospace; } .dark { --bg-canvas: hsl(0 0% 5%); --bg-primary: hsl(0 0% 9%); --bg-secondary: hsl(0 0% 12%); --bg-tertiary: hsl(0 0% 16%); --text-primary: hsl(0 0% 100%); --text-secondary: hsl(0 0% 75%); --text-muted: hsl(0 0% 50%); --border-color: hsl(0 0% 20%); --link-color: var(--text-primary); --link-visited: var(--text-secondary); --accent: hsl(0 0% 100%); --accent-muted: hsl(0 0% 75%); --background: 0 0% 9%; --foreground: 0 0% 100%; --card: 0 0% 9%; --card-foreground: 0 0% 100%; --popover: 0 0% 9%; --popover-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 12%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 12%; --muted-foreground: 0 0% 50%; --accent: 0 0% 12%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 0% 100%; } @theme inline { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground)); --color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); --radius: var(--radius); --font-sans: var(--font-sans); --font-mono: var(--font-mono); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { --font-body: var(--font-geist-sans), system-ui, -apple-system, sans-serif; --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif; --font-mono: var(--font-geist-mono), "JetBrains Mono", "Fira Code", Menlo, monospace; background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); line-height: 1.7; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } button, input { font: inherit; } .math-display { display: block; font-family: var(--font-mono); overflow-x: auto; white-space: nowrap; } .math-display-inline { display: inline; overflow: visible; white-space: normal; } .math-display-block { border: 1px solid var(--surface-line, var(--border-color)); border-radius: 8px; color: var(--surface-strong, var(--text-primary)); margin: 22px 0; padding: 16px 18px; } .math-display-render { display: none; } .auth-shell { align-items: center; background: #080808; display: flex; justify-content: center; min-height: 100vh; padding: 28px; } .surface-nav { align-items: center; display: flex; justify-content: space-between; margin: 0 0 48px; } .surface-brand { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-decoration: none; text-transform: uppercase; } .surface-nav-links { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .surface-nav-links a, .surface-theme-toggle, .surface-auth-button { align-items: center; background: transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font-family: var(--font-mono); font-size: 12px; height: 36px; justify-content: center; line-height: 1; padding: 0 14px; text-decoration: none; text-transform: uppercase; } .surface-theme-toggle { padding: 0; width: 36px; } .surface-user-avatar { height: 36px; width: 36px; } .surface-user-popover { border-radius: 8px; } .surface-nav-dark .surface-brand { color: var(--surface-strong, #f4f2ee); } .surface-nav-dark .surface-nav-links a, .surface-nav-dark .surface-theme-toggle, .surface-nav-dark .surface-auth-button { border: 1px solid var(--surface-line, #dedede); color: var(--surface-muted, #aaa); } .surface-nav-dark .surface-nav-links a:hover, .surface-nav-dark .surface-theme-toggle:hover, .surface-nav-dark .surface-auth-button:hover { border-color: var(--surface-muted, #666); color: var(--surface-strong, #f4f2ee); } .surface-nav-light .surface-brand { color: var(--surface-strong, #333); } .dark .surface-nav-light .surface-brand { color: var(--surface-strong, #fff); } .surface-nav-light .surface-nav-links a, .surface-nav-light .surface-theme-toggle, .surface-nav-light .surface-auth-button { border: 1px solid var(--surface-line, #dedede); color: var(--surface-muted, #555); } .surface-nav-light .surface-nav-links a:hover, .surface-nav-light .surface-theme-toggle:hover, .surface-nav-light .surface-auth-button:hover { border-color: var(--surface-muted, #777); color: var(--surface-strong, #333); } .dark .surface-nav-light .surface-nav-links a, .dark .surface-nav-light .surface-theme-toggle, .dark .surface-nav-light .surface-auth-button { border-color: var(--surface-line, #2a2a2a); color: var(--surface-muted, #aaa); } .dark .surface-nav-light .surface-nav-links a:hover, .dark .surface-nav-light .surface-theme-toggle:hover, .dark .surface-nav-light .surface-auth-button:hover { border-color: var(--surface-muted, #666); color: var(--surface-strong, #fff); } @media (max-width: 900px) { .surface-nav { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 38px; } .surface-nav-links { justify-content: flex-start; } } .sumtex-dark-shell { min-height: calc(100vh - var(--topbar-height)); background: #080808; color: #f4f2ee; } .ma-shell { min-height: calc(100vh - var(--topbar-height)); background: #080808; color: #f4f2ee; padding: 34px 5vw 56px; } .ma-frame { margin: 0 auto; max-width: 1440px; } .ma-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 0 0 46px; } .ma-kicker { color: #777; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; line-height: 1; margin: 0 0 22px; text-transform: uppercase; } .ma-title { color: #f5f3ef; font-size: clamp(44px, 6vw, 92px); font-weight: 400; letter-spacing: 0; line-height: 0.95; margin: 0; } .ma-subtitle { color: #8d8d8d; font-size: 18px; line-height: 1.5; margin: 22px 0 0; max-width: 620px; } .ma-primary-action { align-items: center; background: transparent; border: 1px solid #3a3a3a; border-radius: 999px; color: #f1eee8; cursor: pointer; display: inline-flex; font-family: var(--font-mono); font-size: 13px; font-weight: 600; justify-content: center; letter-spacing: 0.14em; min-height: 54px; padding: 0 28px; text-transform: uppercase; transition: border-color 0.2s ease, background 0.2s ease; white-space: nowrap; } .ma-primary-action:hover { background: #151515; border-color: #686868; } .ma-layout { align-items: start; display: grid; gap: 44px; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); } .ma-rail { border-left: 1px solid #242424; display: flex; flex-direction: column; gap: 32px; padding-left: 26px; } .ma-group { display: grid; gap: 12px; } .ma-label { color: #777; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; } .ma-category-list { display: grid; gap: 1px; } .ma-line-option, .ma-toggle-row, .ma-number-row { background: transparent; border: 0; border-bottom: 1px solid #1d1d1d; color: #d8d5ce; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; min-height: 46px; padding: 12px 0; text-align: left; } .ma-line-option:hover, .ma-line-option.active { color: #fff; } .ma-line-option.active .ma-option-name::before { background: #f4f2ee; } .ma-option-name { align-items: center; display: inline-flex; font-size: 15px; gap: 10px; } .ma-option-name::before { background: #363636; border-radius: 999px; content: ""; display: inline-block; height: 7px; width: 7px; } .ma-option-meta { color: #6f6f6f; font-size: 12px; max-width: 130px; text-align: right; } .ma-pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .ma-pill { background: transparent; border: 1px solid #343434; border-radius: 999px; color: #b8b4ad; cursor: pointer; font-family: var(--font-mono); font-size: 12px; min-height: 36px; padding: 0 14px; text-transform: uppercase; } .ma-pill.active { background: #f1eee8; border-color: #f1eee8; color: #080808; } .ma-stage { border-left: 1px solid #242424; min-height: 650px;