style.css

:root {
  --ink: #1d1d1f; --ink2: #6e6e73; --ink3: #86868b; --card: #f5f5f7; --line: #d2d2d7;
  --link: #0066cc; --w: 1080px;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
}

/* ---- strip Gradio chrome ---- */
body, .gradio-container { background: #fff !important; color: var(--ink); font-family: var(--text) !important;
                          -webkit-font-smoothing: antialiased; }
.gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.gradio-container .main, .gradio-container .contain, .gradio-container .wrap { gap: 0 !important; padding: 0 !important; }
footer { display: none !important; }
.html-container { padding: 0 !important; }
.gradio-container a { color: var(--link) !important; text-decoration: none !important; }
.gradio-container a:hover { text-decoration: underline !important; }

/* ---- nav ---- */
.top { position: sticky; top: 0; z-index: 100; height: 48px; padding: 0 max(22px, calc((100% - var(--w)) / 2));
       display: flex; align-items: center; justify-content: space-between;
       background: rgba(255, 255, 255, .8); backdrop-filter: saturate(180%) blur(20px);
       -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.top .brand { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
              color: var(--ink) !important; }
.top .brand:hover, .top nav a:hover { text-decoration: none !important; }
.top nav a { margin-left: 28px; font-size: 12px; color: var(--ink) !important; opacity: .8; }
.top nav a:hover { opacity: 1; }

/* ---- hero ---- */
.intro { max-width: var(--w); margin: 0 auto; padding: 120px 24px 88px; text-align: center; }
.intro h1 { font-family: var(--display); font-size: clamp(30px, 5.4vw, 64px) !important; font-weight: 600 !important;
            white-space: nowrap;
            line-height: 1.05; letter-spacing: -.035em; margin: 0 !important; color: var(--ink) !important; }
.intro h1 br { display: none; }
.intro h1 span { display: block; margin-top: 14px; font-size: .42em; font-weight: 500; letter-spacing: -.015em;
                 color: var(--ink2); }
.intro p { max-width: 640px; margin: 28px auto 0 !important; font-size: 21px !important; line-height: 1.45;
           font-weight: 400; letter-spacing: -.01em; color: var(--ink2) !important; }

/* ---- page + tabs: large centered text tabs, underline on the active one ---- */
.page { max-width: var(--w); margin: 0 auto !important; padding: 0 22px 40px !important; gap: 0 !important; }
.plain-tabs .tab-wrapper { display: flex; justify-content: center; border: 0 !important; padding: 0 !important;
                           background: transparent !important; }
/* Gradio keeps a hidden copy of the tab bar for measuring, plus an overflow menu: keep both out of sight */
.plain-tabs .tab-container.visually-hidden, .plain-tabs .overflow-menu { display: none !important; }
.plain-tabs .tab-container:not(.visually-hidden) {
  display: flex !important; justify-content: center; gap: 48px !important; padding: 0 !important; margin: 0 auto !important;
  background: transparent !important; border: 0 !important; height: auto !important; }
.plain-tabs .tab-container button {
  position: relative; border: 0 !important; border-radius: 0 !important; padding: 6px 0 14px !important; margin: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--ink3) !important;
  font-family: var(--display) !important; font-size: 28px !important; font-weight: 600 !important;
  letter-spacing: -.02em; line-height: 1.1; transition: color .2s ease; }
.plain-tabs .tab-container button:hover { color: var(--ink) !important; }
.plain-tabs .tab-container button.selected { color: var(--ink) !important; }
.plain-tabs .tab-container button::after {
  content: "" !important; display: block !important; position: absolute !important; left: 50% !important; right: auto !important;
  bottom: 0 !important; top: auto !important; width: 0 !important; height: 2px !important; border-radius: 1px;
  background: var(--ink) !important; transform: translateX(-50%); transition: width .25s ease; }
.plain-tabs .tab-container button.selected::after { width: 32px !important; }
.plain-tabs .tabitem, .plain-tabs [role="tabpanel"] { border: 0 !important; padding: 0 !important; background: transparent !important; }

.lede { margin: 36px auto 72px !important; text-align: center; font-size: 17px !important;
        line-height: 1.5; color: var(--ink2) !important; }
.lede span { display: block; white-space: nowrap; }

/* ---- modality groups ---- */
.group + .group { margin-top: 88px; }
.group-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 24px !important;
               font-family: var(--display); font-size: 32px !important; font-weight: 600 !important;
               letter-spacing: -.025em; color: var(--ink) !important; }
.group-title span { font-family: var(--text); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink3); }

/* ---- example cards: state | prompt | outcome ---- */
.item { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: start;
        background: var(--card); border-radius: 24px; padding: 32px; margin-bottom: 16px; }
.item .col { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
             color: var(--ink3); }
.item .media img, .item .media video { display: block; width: 100%; height: auto; max-height: 300px;
                                       object-fit: contain; border-radius: 14px; background: #fff; }
.item .text-state { padding: 16px 18px; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.55;
                    color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.item h3 { font-family: var(--display); font-size: 24px !important; font-weight: 600 !important; line-height: 1.15;
           letter-spacing: -.02em; margin: 0 0 4px !important; color: var(--ink) !important; }
.item .src { font-size: 13px !important; color: var(--ink3) !important; margin: 0 0 18px !important; }
.item .ctx { font-size: 14px !important; line-height: 1.5; color: var(--ink2) !important; margin: 0 0 8px !important; }
.item .task { font-size: 17px !important; line-height: 1.45; letter-spacing: -.01em; color: var(--ink) !important;
              margin: 0 !important; overflow-wrap: anywhere; }

/* grid/flex children may shrink below their content, so long tokens wrap instead of overflowing */
.item > div, .item .outcome * { min-width: 0; }
.item .outcome { overflow-wrap: anywhere; word-break: break-word; }

/* decision outcome: label, score, thin bar (no option is highlighted) */
.opts { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.opts li { position: relative; display: flex; justify-content: space-between; gap: 16px; margin: 0 !important;
           padding-bottom: 10px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.opts li::before, .opts li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px; }
.opts li::before { right: 0; background: #e8e8ed; }
.opts li::after { width: var(--p); background: #86868b; }
.opts li span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.opts li span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.opts li small { font-size: 13px; font-weight: 400; color: var(--ink2); }

/* retrieval outcome: plain ranked list */
.item .res { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.item .res img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; }
.item .docs { margin: 0 !important; padding: 0 0 0 20px !important; display: flex; flex-direction: column; gap: 10px; }
.item .docs li { margin: 0 !important; padding: 0 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.item .docs li::marker { color: var(--ink3); }
.item .note { font-size: 12px !important; color: var(--ink3) !important; margin: 14px 0 0 !important; }

/* ---- footer ---- */
.end { max-width: var(--w); margin: 80px auto 0; padding: 20px 22px 40px; border-top: 1px solid var(--line);
       display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--ink3); }
.end a { color: var(--ink3) !important; }

@media (max-width: 600px) {
  .intro h1 { white-space: normal; }
}

@media (max-width: 900px) {
  .lede span { white-space: normal; }
  .plain-tabs .tab-container button { font-size: 22px !important; }
  .plain-tabs .tab-container:not(.visually-hidden) { gap: 28px !important; }
  .item { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .intro { padding: 80px 24px 64px; }
  .group-title { font-size: 26px !important; }
}