style.css

/* Rules are scoped to .gradio-container so they outrank Gradio's reset in SSR mode. */
.gradio-container {
  --ink: #1d201c;
  --ink-2: #5d645a;
  --ink-3: #737a6f;
  --paper: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f3f4f0;
  --line: #dcdfd7;
  --line-2: #e7e9e3;
  --accent: #2f5d45;
  --error: #a8322d;
  --radius: 4px;
  --label-h: 28px;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 44px 32px 32px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
}
/* Show text exactly as typed: no ligatures or contextual arrows (Inter turns -> into an arrow). */
.gradio-container, .gradio-container textarea, .gradio-container .token-text, .gradio-container .token-tip code {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
html { scrollbar-gutter: stable; }
.gradio-container > .main { width: 100% !important; padding: 0 !important; }
.gradio-container .html-container { padding: 0 !important; }
.gradio-container .block { border-radius: 0 !important; box-shadow: none !important; }

/* Header */
.gradio-container .page-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 24px; row-gap: 6px; margin-bottom: 16px;
}
.gradio-container .page-header h1 {
  margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.gradio-container .model-label { font: 12px/1.25 var(--font-mono); color: var(--ink-3); text-decoration: none; }
.gradio-container .model-label:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gradio-container .intro { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Editors */
.gradio-container .converter-row {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 16px !important; align-items: start;
}
.gradio-container .converter-row > .column { min-width: 0 !important; }
.gradio-container .editor-panel .form { border: 0 !important; background: none !important; box-shadow: none !important; }
.gradio-container .editor-panel .block {
  padding: 0 !important; background: none !important; border: 0 !important; overflow: visible !important;
}
.gradio-container .editor-panel label.container > span {
  display: block; position: static !important; margin: 0 !important; padding: 0 0 8px !important;
  background: none !important; border: 0 !important; color: var(--ink-2) !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 20px !important;
}
.gradio-container .editor-panel textarea {
  height: 248px !important; padding: 14px 16px !important; resize: none;
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: none !important;
  background: var(--surface) !important; color: var(--ink) !important;
  font-family: var(--font) !important; font-size: 15px !important; line-height: 1.65 !important; overflow-y: auto !important;
  scrollbar-width: thin; scrollbar-color: #cdd1c8 transparent;
}
.gradio-container .editor-panel textarea::placeholder { color: var(--ink-3) !important; -webkit-text-fill-color: var(--ink-3); opacity: 1; }
.gradio-container .editor-panel textarea:focus {
  outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgb(47 93 69 / 12%) !important;
}
.gradio-container .editor-panel textarea:disabled { color: var(--ink-2) !important; -webkit-text-fill-color: var(--ink-2); }
.gradio-container .ascii-panel textarea {
  font-family: var(--font-mono) !important; font-size: 13.5px !important; line-height: 1.7 !important; word-break: break-all;
}
.gradio-container .result-box textarea { background: var(--surface-2) !important; }
.gradio-container .result-box textarea:disabled { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }

/* Copy button in the output label row */
.gradio-container .editor-panel .icon-button-wrapper {
  top: -4px !important; right: 0 !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.gradio-container .editor-panel .icon-button {
  width: 28px !important; height: 28px !important; padding: 7px !important; border-radius: var(--radius) !important;
  color: var(--ink-3) !important; background: none !important;
}
.gradio-container .editor-panel .icon-button:hover { color: var(--ink) !important; background: var(--surface-2) !important; }

/* Swap */
.gradio-container .swap-column {
  position: relative; z-index: 2; min-width: 0 !important; overflow: visible !important;
  align-self: stretch; justify-content: center; padding-top: var(--label-h);
}
.gradio-container #swap-mode {
  position: relative; display: flex; align-items: center; justify-content: center; align-self: center;
  width: 36px !important; height: 36px; min-width: 0 !important; padding: 0 !important; overflow: visible !important;
  border: 1px solid var(--line) !important; border-radius: 50% !important;
  background: var(--surface) !important; color: var(--ink-2) !important; font-size: 0 !important;
  transition: color .15s, border-color .15s;
}
.gradio-container #swap-mode::before {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5h10.5M10.5 3l2.5 2.5-2.5 2.5M13.5 10.5H3M5.5 8 3 10.5 5.5 13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5h10.5M10.5 3l2.5 2.5-2.5 2.5M13.5 10.5H3M5.5 8 3 10.5 5.5 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gradio-container #swap-mode:hover:not(:disabled) { color: var(--ink) !important; border-color: #b9beb3 !important; }
/* The icon has no visible label, so hovering names the mode it switches to. */
.gradio-container #swap-mode::after {
  content: 'Switch to compress'; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 3px 7px; border-radius: var(--radius); background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 400; line-height: 1.4; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.gradio-container:has(#output-panel.ascii-panel) #swap-mode::after { content: 'Switch to restore'; }
.gradio-container #swap-mode:hover:not(:disabled)::after { opacity: 1; transition-delay: .35s; }
.gradio-container #swap-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gradio-container #swap-mode:disabled { opacity: .45; }

/* Action row */
.gradio-container .action-row {
  display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 10px 16px !important; margin-top: 2px;
}
.gradio-container .action-row > * { flex: none !important; min-width: 0 !important; width: auto !important; }
.gradio-container .action-row > #result-status { flex: 1 1 260px !important; }
.gradio-container button.run {
  min-width: 144px !important; height: 40px; padding: 0 20px !important; border-radius: var(--radius) !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.005em;
}
.gradio-container button.run:disabled { background: #4a5048 !important; border-color: #4a5048 !important; opacity: 1; cursor: progress; }
.gradio-container button.run:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gradio-container #result-status { font-size: 13px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gradio-container #result-status .figure { color: var(--ink); font-weight: 600; }
.gradio-container #result-status .figure, .gradio-container #result-status .stat { white-space: nowrap; }
.gradio-container #result-status .sep { padding: 0 .2em; color: #b3b8ad; }
.gradio-container #result-status .quiet { color: var(--ink-3); }
.gradio-container #result-status .error { color: var(--error); }

/* Gradio's progress overlay, reduced to a message and a hairline bar inside the output box */
.gradio-container #output-panel > .wrap {
  top: var(--label-h) !important; padding: 0 !important; border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface-2);
}
.gradio-container #output-panel > .wrap > .margin,
.gradio-container #output-panel > .wrap .eta-bar,
.gradio-container #output-panel > .wrap .progress-level-inner { display: none !important; }
/* The status line already reports unexpected errors; skip Gradio's red pill. */
.gradio-container #output-panel > .wrap:has(.error) { display: none !important; }
/* Before token progress arrives: a sliding hairline, and after a few seconds a note about cold starts. */
.gradio-container #output-panel > .wrap:not(.hide):not(:has(.progress-level)) {
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-size: 30% 2px; background-position: -43% 100%; animation: indeterminate 1.6s ease-in-out infinite;
}
@keyframes indeterminate { from { background-position: -43% 100%; } to { background-position: 143% 100%; } }
.gradio-container #output-panel > .wrap:not(.hide):not(:has(.progress-level))::before,
.gradio-container #output-panel > .wrap:not(.hide):not(:has(.progress-level))::after {
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: center;
}
.gradio-container #output-panel > .wrap:not(.hide):not(:has(.progress-level))::before {
  content: 'Preparing the model…'; animation: fade-out .3s 8s both;
}
.gradio-container #output-panel > .wrap:not(.hide):not(:has(.progress-level))::after {
  content: 'Loading the model. The first run after a restart takes about half a minute.'; animation: fade-in .3s 8s both;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.gradio-container #output-panel .progress-text {
  padding: 8px 10px !important; background: none !important; color: var(--ink-3) !important; font: 11px var(--font-mono) !important;
}
.gradio-container #output-panel > .wrap:has(.progress-level) .progress-text { display: none; }
.gradio-container #output-panel .progress-level { position: absolute; inset: 0; }
.gradio-container #output-panel .progress-bar-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  width: auto !important; height: auto !important; border: 0 !important; background: none !important;
}
.gradio-container #output-panel .progress-bar-wrap::before {
  content: attr(aria-valuetext); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.gradio-container #output-panel .progress-bar {
  position: absolute; left: 0; bottom: 0; height: 2px !important; background: var(--accent) !important;
}

/* Toasts (ZeroGPU queue notices and unexpected errors) */
.gradio-container .toast-wrap { top: 16px !important; right: 16px !important; left: auto !important; width: min(340px, calc(100% - 32px)) !important; gap: 8px !important; }
.gradio-container .toast-item:has(.toast-body.success) { display: none; }
.gradio-container .toast-body {
  position: relative; border: 1px solid var(--line) !important; border-radius: 6px !important;
  background: var(--surface) !important; box-shadow: 0 8px 24px rgb(29 32 28 / 8%) !important;
}
.gradio-container .toast-header { padding: 12px 44px 0 14px !important; cursor: default !important; }
.gradio-container .toast-body.info .toast-header { padding-top: 0 !important; }
.gradio-container .toast-icon, .gradio-container .toast-body .chevron, .gradio-container .toast-title.info { display: none !important; }
.gradio-container .toast-title { font-size: 13px !important; font-weight: 600 !important; line-height: 18px !important; color: var(--ink) !important; }
.gradio-container .toast-title.error { color: var(--error) !important; }
.gradio-container .toast-close {
  position: absolute; top: 7px; right: 7px; width: 28px !important; height: 28px !important; margin: 0 !important;
  font-size: 18px !important; color: var(--ink-3) !important;
}
.gradio-container .toast-messages { padding: 4px 44px 13px 14px !important; gap: 4px !important; }
.gradio-container .toast-body.info .toast-messages { padding-top: 12px !important; }
.gradio-container .toast-message-item { padding: 0 !important; }
.gradio-container .toast-message-text { font-size: 13px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.gradio-container .toast-body .timer { height: 2px !important; background: var(--line) !important; }

/* Token costs */
.gradio-container #heatmap:not(:has(.analysis)) { display: none !important; }
.gradio-container .analysis { position: relative; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.gradio-container .analysis-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gradio-container .analysis h2 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.gradio-container .legend { display: flex; align-items: center; gap: 2px; font: 11px var(--font-mono); color: var(--ink-3); }
.gradio-container .legend i { display: block; width: 14px; height: 10px; border-radius: 1px; }
.gradio-container .legend span { padding: 0 6px; }
.gradio-container .legend span:first-child { padding-left: 0; }
.gradio-container .legend span:last-child { padding-right: 0; }
.gradio-container .analysis-hint { margin: 4px 0 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.gradio-container .token-text {
  max-height: 460px; overflow-y: auto; padding: 2px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
  font-size: 16px; line-height: 2.05; color: var(--ink); scrollbar-width: thin; scrollbar-color: #cdd1c8 transparent;
}
.gradio-container .cost-token {
  padding: 3px 0; border-radius: 2px; box-shadow: inset -1px 0 var(--paper);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gradio-container .cost-token[data-newline]::before { content: '↵'; padding: 0 2px; font-size: .8em; opacity: .5; }
.gradio-container .cost-token.selected { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.gradio-container .cost-token:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gradio-container .token-tip {
  position: absolute; z-index: 5; display: flex; align-items: baseline; gap: 10px; padding: 5px 9px;
  border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 12px; line-height: 1.4;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
}
.gradio-container .token-tip.visible { opacity: 1; }
.gradio-container .token-tip code { padding: 0; background: none; color: #fff; font-family: var(--font-mono); font-size: 12px; }
.gradio-container .token-tip span { color: rgb(255 255 255 / 72%); font-variant-numeric: tabular-nums; }
.gradio-container .fine-print { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.gradio-container .quiet { color: var(--ink-3); }

/* Disclosure text */
.gradio-container details summary { width: fit-content; cursor: pointer; color: var(--ink-2); }
.gradio-container details summary::marker { color: var(--ink-3); font-size: .8em; }
.gradio-container details summary:hover { color: var(--ink); }
.gradio-container details p { max-width: 640px; margin: 10px 0 0; line-height: 1.6; color: var(--ink-2); }
.gradio-container .page-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 13px; }
.gradio-container .page-footer a { color: inherit; text-decoration: underline; text-decoration-color: #b9beb3; text-underline-offset: 3px; }
.gradio-container .page-footer a:hover { text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .gradio-container { padding: 24px 16px !important; }
  .gradio-container .page-header { grid-template-columns: minmax(0, 1fr); }
  .gradio-container .model-label { grid-row: 3; }
  .gradio-container .converter-row { grid-template-columns: minmax(0, 1fr); gap: 8px !important; }
  .gradio-container .swap-column { padding-top: 0; }
  .gradio-container #swap-mode::before { transform: rotate(90deg); }
  .gradio-container .editor-panel textarea { height: 176px !important; }
  .gradio-container .action-row button.run { flex: 1 1 100% !important; }
  .gradio-container .analysis-heading { flex-direction: column; gap: 8px; }
  .gradio-container .token-text { max-height: 380px; font-size: 15px; }
}