/* 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; } .muted { color: var(--mute); font-size: 13px; } .try { margin: 6px 0 -4px; } .ft { font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; } .verdict { padding: 14px 16px; background: var(--card); border: 1px solid var(--ink); border-radius: 3px; } .verdict .kicker { margin: 0 0 6px; } .overall { margin: 0 0 14px; font: 600 26px/1.1 Georgia, 'Times New Roman', serif; color: var(--c); text-transform: capitalize; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--c); border-left-width: 4px; border-radius: 3px; background: var(--card); font-size: 14px; color: var(--ink); } .chip b { font-weight: 600; } .chip i { font-style: normal; color: var(--mute); font-family: ui-monospace, monospace; font-size: 12px; } .review { margin-top: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; font-size: 16px; line-height: 2.1; color: var(--ink); } .ev { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 4px; } .ev sup { margin-left: 4px; font: 500 10px/1 ui-monospace, monospace; color: var(--c); letter-spacing: .04em; text-transform: uppercase; } mark { background: transparent; border-bottom: 1px dotted var(--c); padding: 0 1px; color: inherit; } mark small { margin-left: 3px; font: 9px/1 ui-monospace, monospace; color: var(--mute); text-transform: uppercase; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .two ul { padding-left: 18px; margin: 0; } .two li { margin: 6px 0; font-size: 14px; } @media (max-width: 720px) { .two { grid-template-columns: 1fr; } .hd h1 { font-size: 30px; } }