/* paper & ink, matching ahmed.fynxforge.com */ :root, .dark { --paper: #F4F1EA; --card: #FFFDF8; --ink: #141310; --mute: #6B665C; --line: #DAD4C7; --accent: #C2341B; --body-background-fill: var(--paper); --background-fill-primary: var(--card); --background-fill-secondary: var(--paper); --block-background-fill: var(--card); --block-border-color: var(--line); --body-text-color: var(--ink); --input-background-fill: var(--card); --border-color-primary: var(--line); --button-primary-background-fill: var(--ink); --button-primary-background-fill-hover: var(--accent); --button-primary-text-color: var(--paper); --color-accent: var(--accent); --link-text-color: var(--accent); } gradio-app, .gradio-container { background: var(--paper) !important; color: var(--ink); } .gradio-container { max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; font-family: Inter, system-ui, sans-serif; } .gradio-container .label-wrap span, .gradio-container label span, .gradio-container .block-label, .gradio-container .examples-label, .gradio-container [data-testid="block-label"] { color: var(--mute) !important; opacity: 1 !important; } .gradio-container .gallery-item, .gradio-container button.example { background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; } .gradio-container .gallery-item:hover, .gradio-container button.example:hover { border-color: var(--ink) !important; } .hd { padding: 18px 0 6px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; } .hd h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 40px; margin: 4px 0 8px; color: var(--ink); } .kicker, .sec, .ft, .muted, .trace th { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; } .kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0; } .lede { max-width: 820px; color: #3A372F; line-height: 1.55; margin: 0 0 8px; } .links a { color: var(--accent); margin-right: 18px; text-decoration: none; font-size: 14px; } .answer { font-size: 18px; line-height: 1.6; color: var(--ink); padding: 14px 16px; background: var(--card); border: 1px solid var(--ink); border-radius: 3px; } .cite { display: inline-block; min-width: 16px; padding: 1px 4px; margin: 0 1px; border-radius: 2px; background: var(--accent); color: #FBEFE9; font: 600 11px/1.3 ui-monospace, monospace; text-align: center; vertical-align: 3px; } .sources { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: var(--mute); } .sources li { padding: 3px 0; } .muted { color: var(--mute); font-size: 13px; } .sec { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 18px 0 4px; font-weight: 500; } .trace { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); } .trace th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 8px; border-bottom: 1px solid var(--ink); } .trace td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .trace td.c { text-align: center; font-family: ui-monospace, monospace; } .trace td.n { font-family: ui-monospace, monospace; color: var(--accent); font-weight: 600; } .snip { color: #4A463F; font-size: 13px; margin-top: 4px; max-width: 520px; } .bar { width: 120px; height: 6px; background: #ECE7DC; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; } .bar i { display: block; height: 100%; background: var(--accent); } .up { color: #2E7D4F; font-weight: 600; } .down { color: var(--mute); } .same { color: var(--mute); } .ft { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; } @media (max-width: 720px) { .trace td:nth-child(5), .trace th:nth-child(5) { display: none; } .snip { display: none; } .trace td:nth-child(3), .trace td:nth-child(4), .trace th:nth-child(3), .trace th:nth-child(4) { display: none; } .hd h1 { font-size: 30px; } } .try { margin: 6px 0 -4px; }