Spaces:
Sleeping
Sleeping
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap");
:root,
:root.dark,
.dark,
.gradio-container {
color-scheme: dark;
--font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Berkeley Mono", "SFMono-Regular", Menlo, monospace;
--type-caption: 0.75rem;
--type-label: 0.875rem;
--type-body: 1rem;
--type-body-large: 1.0625rem;
--type-heading: 1.5rem;
--type-display: clamp(2.5rem, 5.6vw, 4.5rem);
--leading-tight: 1.1;
--leading-body: 1.65;
--leading-reading: 1.72;
--surface-canvas: #08090a;
--surface-deep: #050506;
--surface-panel: #0f1012;
--surface-elevated: #17181b;
--surface-hover: #202126;
--surface-glass: rgba(15, 16, 18, 0.78);
--surface-input: rgba(255, 255, 255, 0.035);
--text-primary: #f7f8f8;
--text-secondary: #c6c9d0;
--text-tertiary: #8a8f98;
--text-disabled: #7c818a;
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.16);
--grid-line: rgba(255, 255, 255, 0.025);
--accent-primary: #5e6ad2;
--accent-bright: #7170ff;
--accent-hover: #828fff;
--accent-info: #76a7ff;
--accent-study: #a494ff;
--action-primary: #4f5bc0;
--action-hover: #5a65ca;
--accent-wash: rgba(113, 112, 255, 0.12);
--accent-glow: rgba(94, 106, 210, 0.2);
--status-success: #36b37e;
--status-warning: #d5a83f;
--status-error: #e0626c;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--radius-control: 7px;
--radius-card: 12px;
--radius-panel: 16px;
--radius-round: 999px;
--content-max: 1280px;
--background-fill-primary: var(--surface-canvas);
--background-fill-secondary: var(--surface-panel);
--body-background-fill: var(--surface-canvas);
--body-text-color: var(--text-primary);
--block-background-fill: transparent;
--block-border-color: transparent;
--block-border-width: 0;
--input-background-fill: var(--surface-elevated);
--input-border-color: var(--border-default);
--input-placeholder-color: var(--text-disabled);
--button-secondary-background-fill: var(--surface-elevated);
--button-secondary-text-color: var(--text-secondary);
--button-secondary-border-color: var(--border-default);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--surface-canvas);
}
html,
body {
min-height: 100%;
margin: 0;
font-family: var(--font-sans) !important;
font-feature-settings: "cv01" 1, "ss03" 1;
font-synthesis: none;
text-rendering: optimizeLegibility;
color: var(--text-primary) !important;
background-color: var(--surface-canvas) !important;
}
body {
background-image:
radial-gradient(circle at 77% 10%, var(--accent-glow), transparent 29rem),
radial-gradient(circle at 14% 22%, var(--accent-wash), transparent 23rem),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
background-size: auto, auto, 48px 48px, 48px 48px !important;
background-attachment: fixed !important;
}
.gradio-container,
.gradio-container .main,
.gradio-container .contain,
.gradio-container .html-container,
.gradio-container .prose {
color: var(--text-primary) !important;
background: transparent !important;
}
.gradio-container {
width: min(100%, var(--content-max)) !important;
max-width: var(--content-max) !important;
margin: 0 auto !important;
padding: 0 clamp(var(--space-4), 3vw, var(--space-8)) var(--space-8) !important;
}
#doculearn-app,
.gradio-container {
--font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif !important;
--font-mono: "Berkeley Mono", "SFMono-Regular", Menlo, monospace !important;
--surface-canvas: #08090a !important;
--surface-deep: #050506 !important;
--surface-panel: #0f1012 !important;
--surface-elevated: #17181b !important;
--surface-hover: #202126 !important;
--surface-glass: rgba(15, 16, 18, 0.78) !important;
--surface-input: rgba(255, 255, 255, 0.035) !important;
--text-primary: #f7f8f8 !important;
--text-secondary: #c6c9d0 !important;
--text-tertiary: #8a8f98 !important;
--text-disabled: #7c818a !important;
--border-subtle: rgba(255, 255, 255, 0.06) !important;
--border-default: rgba(255, 255, 255, 0.1) !important;
--border-strong: rgba(255, 255, 255, 0.16) !important;
--accent-primary: #5e6ad2 !important;
--accent-bright: #7170ff !important;
--accent-hover: #828fff !important;
--accent-info: #76a7ff !important;
--accent-study: #a494ff !important;
--action-primary: #4f5bc0 !important;
--action-hover: #5a65ca !important;
--accent-wash: rgba(113, 112, 255, 0.12) !important;
--accent-glow: rgba(94, 106, 210, 0.2) !important;
--status-success: #36b37e !important;
--status-warning: #d5a83f !important;
--status-error: #e0626c !important;
--body-background-fill: #08090a !important;
--body-text-color: #f7f8f8 !important;
--background-fill-primary: #08090a !important;
--background-fill-secondary: #0f1012 !important;
--block-background-fill: transparent !important;
--input-background-fill: #17181b !important;
--input-border-color: rgba(255, 255, 255, 0.1) !important;
--button-primary-background-fill: #4f5bc0 !important;
--button-secondary-background-fill: #17181b !important;
--spacing-xxs: 1px !important;
--spacing-xs: 2px !important;
--spacing-sm: 4px !important;
--spacing-md: 6px !important;
--spacing-lg: 8px !important;
--spacing-xl: 10px !important;
--spacing-xxl: 16px !important;
--radius-xxs: 1px !important;
--radius-xs: 2px !important;
--radius-sm: 4px !important;
--radius-md: 6px !important;
--radius-lg: 8px !important;
--body-text-size: 1rem !important;
--body-text-weight: 400 !important;
--button-border-width: 1px !important;
--button-large-radius: var(--radius-control) !important;
--button-medium-radius: var(--radius-control) !important;
--button-small-radius: var(--radius-control) !important;
color-scheme: dark !important;
isolation: isolate;
}
#doculearn-app,
.gradio-container {
width: min(100%, var(--content-max)) !important;
max-width: var(--content-max) !important;
margin-inline: auto !important;
padding: 0 clamp(var(--space-4), 3vw, var(--space-8)) var(--space-8) !important;
}
#doculearn-app,
#doculearn-app *,
.gradio-container,
.gradio-container * {
font-family: var(--font-sans) !important;
}
#doculearn-app code,
#doculearn-app pre,
#doculearn-app .font-mono,
#doculearn-app [data-testid="number-input"] input,
.gradio-container code,
.gradio-container pre,
.gradio-container .font-mono,
.gradio-container [data-testid="number-input"] input {
font-family: var(--font-mono) !important;
}
html body #root > #doculearn-app,
html body #root > div > .gradio-container,
html body #root > #doculearn-app::before,
html body #root > #doculearn-app::after,
html body #root > div > .gradio-container::before,
html body #root > div > .gradio-container::after,
.gradio-container::before,
.gradio-container::after {
background-color: var(--surface-canvas) !important;
background-image: none !important;
}
#doculearn-app::before,
#doculearn-app::after {
display: none !important;
content: none !important;
}
.gradio-container .panel-heading > div {
padding-top: 6px !important;
}
.gradio-container .panel-heading h2 {
margin: 0 !important;
color: var(--text-primary) !important;
font-size: 1.25rem !important;
font-weight: 650 !important;
letter-spacing: -0.014em !important;
line-height: 1.3 !important;
}
.gradio-container .panel-heading p {
margin: var(--space-1) 0 0 !important;
color: var(--text-tertiary) !important;
font-size: 0.875rem !important;
line-height: 1.45 !important;
}
.gradio-container .control-stack .panel-icon {
border-color: rgba(118, 167, 255, 0.24) !important;
background: rgba(118, 167, 255, 0.12) !important;
color: var(--accent-info) !important;
}
.gradio-container .preview-col .panel-icon {
border-color: rgba(164, 148, 255, 0.26) !important;
background: rgba(164, 148, 255, 0.13) !important;
color: var(--accent-study) !important;
}
.gradio-container .block,
.gradio-container .form,
.gradio-container .panel,
.gradio-container .wrap,
.gradio-container fieldset {
color: var(--text-primary) !important;
}
/* Brand navigation */
.brand-shell {
position: relative;
z-index: 2;
min-height: 456px;
contain: layout;
}
.product-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
height: 68px;
flex: 0 0 68px;
border-bottom: 1px solid var(--border-subtle);
}
.brand-lockup {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--text-primary) !important;
font-size: 0.9375rem;
font-weight: 590;
letter-spacing: -0.012em;
text-decoration: none !important;
}
.brand-mark {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid var(--border-default);
border-radius: 9px;
background:
linear-gradient(145deg, var(--accent-wash), transparent),
var(--surface-elevated);
}
.brand-mark svg {
width: 22px;
height: 22px;
fill: none;
stroke: var(--text-primary);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.brand-mark svg path:first-child {
fill: var(--accent-primary);
stroke: var(--accent-hover);
opacity: 0.55;
}
.header-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 0.75rem;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.1);
}
/* Hero */
.hero-shell {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
gap: var(--space-10);
align-items: center;
min-height: 410px;
contain: layout paint;
padding: var(--space-16) 0 var(--space-12);
}
.hero-copy {
max-width: 48rem;
}
.eyebrow {
margin-bottom: var(--space-5);
color: var(--accent-hover);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 510;
letter-spacing: 0.075em;
text-transform: uppercase;
}
.hero-copy h1 {
margin: 0;
color: var(--text-primary) !important;
font-size: clamp(2.5rem, 5.6vw, 4.5rem);
font-weight: 510;
letter-spacing: -0.045em;
line-height: 1.02;
text-wrap: balance;
}
.hero-copy h1 span {
color: var(--text-tertiary);
}
.hero-copy p {
max-width: 39rem;
margin: var(--space-6) 0 0;
color: var(--text-secondary) !important;
font-size: 1.0625rem;
line-height: 1.65;
text-wrap: pretty;
}
.hero-visual {
position: relative;
display: grid;
min-height: 280px;
height: 280px;
place-items: center;
isolation: isolate;
}
.hero-visual::before {
position: absolute;
z-index: -2;
width: 240px;
height: 240px;
border-radius: 50%;
background: var(--accent-primary);
content: "";
filter: blur(95px);
opacity: 0.2;
}
.document-orbit {
position: absolute;
border: 1px solid var(--border-subtle);
border-radius: 50%;
}
.orbit-one {
width: 250px;
height: 250px;
}
.orbit-two {
width: 190px;
height: 190px;
}
.document-stack {
position: relative;
width: 164px;
height: 204px;
transform: rotate(4deg);
}
.document-sheet {
position: absolute;
inset: 0;
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
}
.sheet-back {
background: var(--surface-hover);
transform: translate(-24px, 17px) rotate(-9deg);
}
.sheet-mid {
background: var(--accent-primary);
transform: translate(17px, 9px) rotate(7deg);
opacity: 0.72;
}
.sheet-front {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-8) var(--space-6);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 42%),
var(--surface-elevated);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.35),
inset 0 1px 0 var(--border-subtle);
}
.sheet-front::before {
width: 42px;
height: 42px;
margin-bottom: var(--space-3);
border-radius: 9px;
background: var(--accent-wash);
box-shadow: inset 0 0 0 1px var(--border-default);
content: "";
}
.sheet-front span {
display: block;
width: 100%;
height: 5px;
border-radius: var(--radius-round);
background: var(--border-strong);
}
.sheet-front span:nth-child(3) {
width: 74%;
}
.sheet-front span:nth-child(4) {
width: 88%;
}
.sheet-front span:nth-child(5) {
width: 58%;
}
.rag-node {
position: absolute;
width: 10px;
height: 10px;
border: 2px solid var(--surface-canvas);
border-radius: 50%;
background: var(--accent-hover);
box-shadow: 0 0 18px var(--accent-hover);
}
.node-a {
top: 11px;
right: -39px;
}
.node-b {
right: -31px;
bottom: 34px;
}
.node-c {
bottom: -24px;
left: 24px;
}
/* Workflow strip */
.site-info-note {
margin-bottom: var(--space-8) !important;
}
.workflow-strip {
display: grid;
grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 2fr);
gap: var(--space-6);
align-items: center;
padding: var(--space-5) var(--space-6);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-panel);
background: var(--surface-glass);
backdrop-filter: blur(18px);
}
.workflow-intro {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.workflow-label {
color: var(--status-warning);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.workflow-intro strong {
color: var(--text-primary);
font-size: 0.9375rem;
font-weight: 510;
}
.workflow-steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.workflow-steps li {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
color: var(--text-secondary);
font-size: 0.8125rem;
white-space: nowrap;
}
.workflow-steps span {
color: var(--text-disabled);
font-family: var(--font-mono);
font-size: 0.6875rem;
}
/* Main workspace */
.main-layout {
display: grid !important;
grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr) !important;
gap: var(--space-6) !important;
align-items: stretch !important;
margin-bottom: var(--space-8) !important;
background: transparent !important;
}
.main-layout > .control-stack,
.main-layout > .preview-col {
min-width: 0 !important;
}
.control-stack,
.preview-col {
display: flex !important;
overflow: hidden;
flex-direction: column !important;
gap: var(--space-4) !important;
padding: var(--space-6) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-panel) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 45%),
var(--surface-glass) !important;
box-shadow: inset 0 1px 0 var(--border-subtle) !important;
backdrop-filter: blur(18px);
}
.control-stack {
background: #111113 !important;
border-color: rgba(255, 255, 255, 0.08) !important;
border-radius: 20px !important;
padding: var(--space-8) var(--space-7) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 32px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: none;
gap: var(--space-5) !important;
}
.panel-heading {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.panel-heading > div {
padding-top: 6px;
}
.panel-icon {
display: grid;
flex: 0 0 56px;
width: 56px;
height: 56px;
place-items: center;
border: 1px solid var(--accent-wash);
border-radius: 14px;
background: var(--accent-wash);
color: var(--accent-hover);
}
.panel-icon svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.panel-heading h2 {
margin: 0;
color: var(--text-primary) !important;
font-size: 1.25rem;
font-weight: 650;
letter-spacing: -0.014em;
line-height: 1.3;
}
.panel-heading p {
margin: var(--space-1) 0 0;
color: var(--text-tertiary) !important;
font-size: 0.875rem;
line-height: 1.45;
}
/* Typography bridge */
.gradio-container label,
.gradio-container .gr-label,
.gradio-container .block-title,
.gradio-container .label-wrap span,
.gradio-container .label-wrap {
color: var(--text-secondary) !important;
font-size: 0.8125rem !important;
font-weight: 510 !important;
}
.gradio-container p,
.gradio-container li,
.gradio-container .prose {
color: var(--text-secondary);
}
.gradio-container a {
color: var(--accent-hover);
}
.gradio-container code {
color: var(--text-secondary) !important;
font-family: var(--font-mono) !important;
}
.help-markdown p,
.help-markdown li,
.doc-summary,
.doc-summary p,
.doc-summary li,
.feature-sub p {
color: var(--text-tertiary) !important;
font-size: 0.875rem !important;
line-height: 1.6 !important;
}
.doc-summary {
padding: var(--space-4) !important;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
background:
linear-gradient(135deg, var(--accent-wash), transparent 58%),
var(--surface-input) !important;
}
.library-empty {
display: flex;
align-items: center;
gap: var(--space-3);
}
.library-empty-icon {
display: grid;
flex: 0 0 36px;
width: 36px;
height: 36px;
place-items: center;
border: 1px solid var(--border-default);
border-radius: 9px;
background: var(--surface-elevated);
color: var(--text-tertiary);
}
.library-empty-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.6;
}
.library-empty strong,
.library-empty small {
display: block;
}
.library-empty strong {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 590;
}
.library-empty small {
margin-top: 2px;
color: var(--text-tertiary);
font-size: 0.75rem;
line-height: 1.45;
}
.library-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.library-stat {
display: flex;
min-width: 0;
align-items: baseline;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-subtle);
border-radius: 9px;
background: rgba(255, 255, 255, 0.025);
}
.library-stat strong {
color: var(--text-primary);
font-size: 1.125rem;
font-weight: 620;
letter-spacing: -0.02em;
}
.library-stat span {
overflow: hidden;
color: var(--text-tertiary);
font-size: 0.75rem;
font-weight: 510;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Inputs and generated Gradio wrappers */
.gradio-container textarea,
.gradio-container input:not([type="range"]):not([type="checkbox"]),
.gradio-container select {
min-height: 44px !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-control) !important;
outline: none !important;
background: var(--surface-input) !important;
box-shadow: none !important;
color: var(--text-primary) !important;
font-family: var(--font-sans) !important;
font-size: 0.9375rem !important;
font-weight: 400 !important;
transition:
background 140ms ease-out,
border-color 140ms ease-out,
box-shadow 140ms ease-out !important;
}
.gradio-container textarea:hover,
.gradio-container input:not([type="range"]):not([type="checkbox"]):hover,
.gradio-container select:hover {
border-color: var(--border-strong) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
.gradio-container textarea:focus,
.gradio-container input:not([type="range"]):not([type="checkbox"]):focus,
.gradio-container select:focus {
border-color: var(--accent-bright) !important;
box-shadow: 0 0 0 3px var(--accent-wash) !important;
}
.gradio-container ::placeholder {
color: var(--text-disabled) !important;
opacity: 1 !important;
}
.gradio-container input[type="checkbox"] {
accent-color: var(--accent-bright);
}
.gradio-container input[type="range"] {
accent-color: var(--accent-bright);
}
.gradio-container .feature-slider .head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
}
.gradio-container .feature-slider .head label {
min-width: 0;
}
.gradio-container .feature-slider [data-testid="block-info"] {
color: var(--text-secondary) !important;
font-size: 0.8125rem !important;
font-weight: 510 !important;
line-height: 1.4 !important;
text-wrap: pretty;
}
.gradio-container .feature-slider .tab-like-container {
display: flex;
flex: 0 0 auto;
min-height: var(--space-8);
align-items: stretch;
}
.gradio-container .feature-slider input[data-testid="number-input"] {
width: var(--space-16) !important;
min-width: var(--space-16) !important;
min-height: var(--space-8) !important;
height: var(--space-8) !important;
padding: 0 var(--space-2) !important;
color: var(--text-primary) !important;
font-size: 0.875rem !important;
font-weight: 510 !important;
line-height: var(--space-8) !important;
text-align: center;
}
.gradio-container .feature-slider button[data-testid="reset-button"] {
width: var(--space-8) !important;
min-width: var(--space-8) !important;
min-height: var(--space-8) !important;
height: var(--space-8) !important;
padding: 0 !important;
color: var(--text-tertiary) !important;
}
.gradio-container .feature-slider .slider_input_container {
gap: var(--space-2);
margin-top: var(--space-2);
align-items: center;
}
.gradio-container .feature-slider .min_value,
.gradio-container .feature-slider .max_value {
min-width: var(--space-5);
color: var(--text-tertiary);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.gradio-container .feature-slider .max_value {
text-align: right;
}
.gradio-container fieldset,
.gradio-container form,
.gradio-container .fieldset,
.gradio-container .form,
.gradio-container .gr-form,
.gradio-container .panel,
.gradio-container .gr-panel,
.gradio-container .wrap {
border-color: var(--border-subtle) !important;
background: transparent !important;
}
.gradio-container form,
.gradio-container div.form {
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-control) !important;
background: var(--surface-input) !important;
}
.gradio-container .gr-dropdown,
.gradio-container .gr-checkboxgroup,
.gradio-container .gr-radiogroup,
.gradio-container .gr-slider,
.gradio-container .gr-text-input,
.gradio-container .gr-textbox,
.gradio-container .gr-code {
border-color: transparent !important;
background: transparent !important;
}
/* File drop area */
.control-stack .gr-file,
.upload-dropzone {
display: flex !important;
flex-direction: column !important;
gap: var(--space-2) !important;
overflow: visible;
min-height: 128px;
padding: var(--space-2) !important;
border: 1px dashed var(--border-strong) !important;
border-radius: var(--radius-card) !important;
background:
radial-gradient(circle at 50% 0, var(--accent-wash), transparent 60%),
var(--surface-input) !important;
box-shadow: inset 0 1px 0 var(--border-subtle) !important;
transition:
border-color 140ms ease-out,
background-color 140ms ease-out !important;
}
.control-stack .gr-file > button:not(.icon-button),
.upload-dropzone > button:not(.icon-button) {
width: 100% !important;
min-height: 146px !important;
border: 0 !important;
border-radius: 9px !important;
background: transparent !important;
color: var(--text-tertiary) !important;
font-size: 0.8125rem !important;
line-height: 1.5 !important;
}
.control-stack .gr-file > button:not(.icon-button):hover,
.upload-dropzone > button:not(.icon-button):hover {
color: var(--text-primary) !important;
background: var(--accent-wash) !important;
}
.source-file-picker > button .wrap {
display: flex !important;
align-items: center !important;
color: var(--text-secondary) !important;
font-family: var(--font-sans) !important;
font-size: 0.875rem !important;
font-weight: 510 !important;
}
.source-file-picker > button .icon-wrap {
display: grid !important;
width: 40px !important;
height: 40px !important;
margin-bottom: var(--space-2) !important;
place-items: center;
border: 1px solid var(--border-default);
border-radius: 10px;
background: var(--surface-elevated);
color: var(--accent-hover);
}
.source-file-picker > button .or {
color: var(--text-disabled) !important;
font-size: 0.75rem !important;
}
.source-file-picker:focus-within {
border-color: var(--accent-bright) !important;
box-shadow:
inset 0 1px 0 var(--border-subtle),
0 0 0 3px var(--accent-wash) !important;
}
.source-file-picker .file-preview,
.source-file-picker [data-testid="file-preview"] {
border-collapse: separate !important;
border-spacing: 0 var(--space-2) !important;
table-layout: fixed !important;
width: 100% !important;
min-height: 0 !important;
border: 0 !important;
background: transparent !important;
}
.source-file-picker .file-preview-holder {
width: 100% !important;
max-height: 152px !important;
padding-right: 44px !important;
overflow: auto !important;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.source-file-picker .file-preview tbody {
display: grid !important;
gap: var(--space-2) !important;
}
.source-file-picker .file-preview tr.file {
display: grid !important;
min-height: 44px;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: var(--space-2);
align-items: center;
padding: var(--space-2) var(--space-3) !important;
border: 1px solid var(--border-default);
border-radius: 9px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
var(--surface-elevated);
}
.source-file-picker .file-preview td {
display: flex !important;
align-items: center;
min-width: 0;
padding: 0 !important;
border: 0 !important;
}
.source-file-picker .file-preview td.filename {
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-file-picker .file-preview td.filename .stem {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-file-picker .file-preview td.filename .ext {
flex: 0 0 auto;
}
.source-file-picker .file-preview td.download {
width: auto;
white-space: nowrap;
}
.source-file-picker .file-preview .download-link {
display: inline-flex !important;
min-height: 28px;
align-items: center;
padding: 0 var(--space-2);
border: 1px solid transparent;
border-radius: 7px;
color: #5f99ff !important;
font-size: 0.8125rem;
font-weight: 510;
line-height: 1;
text-decoration: none !important;
}
.source-file-picker .file-preview .download-link:hover {
border-color: rgba(95, 153, 255, 0.24);
background: rgba(95, 153, 255, 0.08);
}
.source-file-picker .file-preview tr.file button,
.source-file-picker .file-preview tr.file .icon-button {
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
padding: 0 !important;
border: 1px solid var(--border-default) !important;
border-radius: 7px !important;
background: rgba(255, 255, 255, 0.035) !important;
color: var(--text-tertiary) !important;
}
.source-file-picker .file-preview tr.file button:hover,
.source-file-picker .file-preview tr.file .icon-button:hover {
border-color: rgba(224, 98, 108, 0.36) !important;
background: rgba(224, 98, 108, 0.08) !important;
color: #f09ba2 !important;
}
.source-file-picker:has(.file-preview) > button,
.source-file-picker:has([data-testid="file-preview"]) > button {
min-height: 60px !important;
border: 1px dashed var(--border-default) !important;
transition:
min-height 200ms ease-out,
border-color 140ms ease-out,
background-color 140ms ease-out !important;
}
.source-file-picker:has(.file-preview) > button .icon-wrap,
.source-file-picker:has([data-testid="file-preview"]) > button .icon-wrap {
width: 30px !important;
height: 30px !important;
margin-bottom: var(--space-1) !important;
}
/* Clear button inside file upload - compact floating icon */
.source-file-picker {
position: relative !important;
}
.source-file-picker .icon-button-wrapper {
position: absolute !important;
top: var(--space-3) !important;
right: var(--space-3) !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
width: 32px !important;
height: auto !important;
flex-direction: column !important;
gap: var(--space-2) !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
z-index: 9 !important;
}
.source-file-picker .icon-button-wrapper .icon-button {
position: relative !important;
inset: auto !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border: 1px solid var(--border-default) !important;
border-radius: 9px !important;
background: rgba(23, 24, 27, 0.88) !important;
box-shadow: none !important;
color: var(--text-secondary) !important;
}
.source-file-picker .icon-button-wrapper .icon-button:hover {
border-color: var(--border-strong) !important;
background: var(--surface-hover) !important;
color: var(--text-primary) !important;
}
.source-file-picker .icon-button-wrapper button[aria-label*="upload" i] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
border: 0 !important;
background: transparent !important;
}
.source-file-picker .icon-button[aria-label="Clear"] {
width: 32px !important;
min-height: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 9px !important;
background: rgba(23, 24, 27, 0.88) !important;
border: 1px solid var(--border-default) !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: var(--text-tertiary) !important;
transition:
background 140ms ease-out,
border-color 140ms ease-out,
color 140ms ease-out,
transform 140ms ease-out !important;
position: relative !important;
top: auto !important;
right: auto !important;
z-index: 10 !important;
}
.source-file-picker .icon-button[aria-label="Clear"] .small {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.source-file-picker .icon-button[aria-label="Clear"] svg {
width: 16px !important;
height: 16px !important;
}
.source-file-picker .icon-button[aria-label="Clear"]:hover {
background: var(--surface-hover) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
transform: scale(1.08) !important;
}
.source-file-picker .icon-button[aria-label="Clear"]:active {
transform: scale(0.95) !important;
}
/* Hide Clear button when no files are selected */
.source-file-picker:not(:has(.file-preview)):not(:has([data-testid="file-preview"])) .icon-button[aria-label="Clear"] {
display: none !important;
}
.source-status .status-bar {
background: rgba(54, 179, 126, 0.035);
}
/* Buttons */
.gradio-container button {
min-height: 44px !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-control) !important;
background: var(--surface-input) !important;
box-shadow: inset 0 1px 0 var(--border-subtle) !important;
color: var(--text-secondary) !important;
font-family: var(--font-sans) !important;
font-size: 0.875rem !important;
font-weight: 510 !important;
transition:
transform 140ms ease-out,
background 140ms ease-out,
border-color 140ms ease-out,
color 140ms ease-out !important;
}
.gradio-container button:hover:not(:disabled) {
border-color: var(--border-strong) !important;
background: var(--surface-hover) !important;
color: var(--text-primary) !important;
}
.gradio-container button:active:not(:disabled) {
transform: translateY(1px) scale(0.995) !important;
}
.gradio-container button:focus-visible,
.gradio-container a:focus-visible,
.gradio-container summary:focus-visible {
outline: 2px solid var(--accent-hover) !important;
outline-offset: 2px !important;
}
.gradio-container button:disabled {
border-color: var(--border-subtle) !important;
color: var(--text-disabled) !important;
opacity: 0.6;
}
.gradio-container .gen-btn {
border-color: var(--accent-bright) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
var(--action-primary) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 8px 24px rgba(94, 106, 210, 0.18) !important;
color: var(--text-primary) !important;
}
.gradio-container .gen-btn:hover:not(:disabled) {
border-color: var(--accent-hover) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
var(--action-hover) !important;
transform: translateY(-1px) !important;
}
/* Accordions */
.gradio-container .accordion,
.gradio-container .gr-accordion {
overflow: hidden !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-control) !important;
background: var(--surface-input) !important;
}
.gradio-container .accordion > .label-wrap,
.gradio-container .gr-accordion > .label-wrap {
min-height: 44px;
padding: 0 var(--space-3) !important;
background: transparent !important;
color: var(--text-secondary) !important;
}
.gradio-container .accordion > .label-wrap:hover,
.gradio-container .gr-accordion > .label-wrap:hover {
background: var(--surface-hover) !important;
color: var(--text-primary) !important;
}
.gradio-container .setup-accordion {
min-height: 52px;
padding: 0 !important;
border-color: var(--border-default) !important;
border-radius: 9px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
var(--surface-input) !important;
transition:
border-color 140ms ease-out,
background-color 140ms ease-out;
}
.gradio-container .setup-accordion:has(> .label-wrap:hover),
.gradio-container .setup-accordion:has(> .label-wrap:focus-visible) {
border-color: var(--border-strong) !important;
}
.gradio-container .setup-accordion:has(> .label-wrap:focus-visible) {
border-color: var(--accent-bright) !important;
box-shadow: 0 0 0 2px var(--accent-wash) !important;
}
.gradio-container .setup-accordion:has(> .label-wrap.open) {
background: var(--surface-input) !important;
}
.gradio-container .setup-accordion > .label-wrap {
display: flex !important;
align-items: center !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 var(--space-3) 0 var(--space-4) !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
color: var(--text-secondary) !important;
font-size: 0.875rem !important;
font-weight: 510 !important;
letter-spacing: -0.006em;
transition:
background-color 140ms ease-out,
color 140ms ease-out;
}
.gradio-container .setup-accordion > .label-wrap:focus-visible {
outline: 0 !important;
}
.gradio-container .setup-accordion > .label-wrap:hover {
background: rgba(255, 255, 255, 0.025) !important;
color: var(--text-primary) !important;
}
.gradio-container .setup-accordion > .label-wrap.open {
margin-bottom: var(--space-3) !important;
border-bottom: 1px solid var(--border-subtle) !important;
border-radius: 8px 8px 0 0 !important;
color: var(--text-primary) !important;
}
.gradio-container .setup-accordion > .label-wrap > span:first-child {
flex: 1 1 auto;
text-align: left;
}
.gradio-container .setup-accordion > .label-wrap .icon {
display: grid;
flex: 0 0 24px;
width: 24px;
height: 24px;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: 6px;
background: var(--surface-elevated);
color: var(--text-tertiary) !important;
font-size: 0.625rem !important;
line-height: 1;
transition:
transform 140ms ease-out,
border-color 140ms ease-out,
color 140ms ease-out;
}
.gradio-container .setup-accordion > .label-wrap:not(.open) .icon {
transform: rotate(-90deg) !important;
}
.gradio-container .setup-accordion > .label-wrap.open .icon {
border-color: var(--border-default);
color: var(--text-secondary) !important;
transform: rotate(0deg) !important;
}
.gradio-container
.setup-accordion
> [data-testid="accordion-content"]
> .column {
gap: var(--space-3) !important;
padding: 0 var(--space-4) var(--space-4) !important;
}
/* Status */
.status-bar {
position: relative;
min-height: 42px;
padding: var(--space-3) var(--space-4) var(--space-3) 38px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: var(--surface-input);
color: var(--text-secondary);
font-size: 0.8125rem;
line-height: 1.45;
}
.status-bar::before {
position: absolute;
top: 50%;
left: var(--space-4);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.1);
content: "";
transform: translateY(-50%);
}
.status-bar details {
margin-top: var(--space-2);
}
/* Tabs and feature workspace — segmented control style */
.gradio-container .learning-tabs {
overflow: visible;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-panel) !important;
background: var(--surface-glass) !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] {
display: flex !important;
gap: 4px !important;
padding: 4px !important;
margin: 4px 4px 0 !important;
border-bottom: none !important;
border-radius: 10px !important;
background: rgba(0, 0, 0, 0.15) !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button {
flex: 0 1 auto !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 16px !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
border-bottom: none !important;
background: transparent !important;
color: var(--text-tertiary) !important;
font-family: var(--font-sans) !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition:
background 150ms ease,
color 150ms ease,
box-shadow 150ms ease,
transform 100ms ease !important;
text-align: center !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
outline: none !important;
user-select: none !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button:hover {
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-primary) !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button:active {
transform: scale(0.98) !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button:focus-visible {
outline: 2px solid var(--accent-bright) !important;
outline-offset: 2px !important;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button.selected,
.gradio-container .learning-tabs .tab-container[role="tablist"] button[aria-selected="true"] {
background: var(--accent-wash) !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
}
/* Tab icon base */
.gradio-container .learning-tabs .tab-container[role="tablist"] button::before {
display: inline-block;
width: 16px !important;
height: 16px !important;
background: currentColor !important;
content: "" !important;
flex-shrink: 0;
vertical-align: middle;
transition: opacity 150ms ease;
}
/* Q&A — MessageCircle */
.gradio-container .learning-tabs .tab-container[role="tablist"] button[data-tab-id="qa"]::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Summary — FileText */
.gradio-container .learning-tabs .tab-container[role="tablist"] button[data-tab-id="summary"]::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Quiz — Sparkles */
.gradio-container .learning-tabs .tab-container[role="tablist"] button[data-tab-id="quiz"]::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4m0 10v4M5.5 5.5l3 3m7 7 3 3M3 12h4m10 0h4M5.5 18.5l3-3m7-7 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4m0 10v4M5.5 5.5l3 3m7 7 3 3M3 12h4m10 0h4M5.5 18.5l3-3m7-7 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Flashcards — Layers */
.gradio-container .learning-tabs .tab-container[role="tablist"] button[data-tab-id="flashcards"]::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Dim inactive icons, brighten on hover */
.gradio-container
.learning-tabs
.tab-container[role="tablist"]
button:not(.selected):not([aria-selected="true"])::before {
opacity: 0.55;
}
.gradio-container .learning-tabs .tab-container[role="tablist"] button:hover::before {
opacity: 0.85;
}
.gradio-container .learning-tabs .tabitem {
padding: var(--space-6) !important;
background: transparent !important;
}
/* Responsive — full-width equal tabs on small screens */
@media (max-width: 640px) {
.gradio-container .learning-tabs .tab-container[role="tablist"] button {
flex: 1 1 0% !important;
min-width: 0 !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 8px !important;
font-size: 0.75rem !important;
gap: 4px !important;
}
}
html body .gradio-container p,
html body .gradio-container li {
font-size: var(--type-body) !important;
line-height: var(--leading-body) !important;
}
html body .gradio-container .panel-heading h2,
html body .gradio-container .summary-heading h2,
html body .gradio-container .quiz-heading h2,
html body .gradio-container .flashcard-heading h2,
html body .gradio-container .qa-heading h2 {
font-size: var(--type-heading) !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
}
html body .gradio-container .result-markdown,
html body .gradio-container .feature-output .prose,
html body .gradio-container .qa-chat .message .prose {
max-width: 72ch;
overflow-wrap: anywhere;
}
html body .gradio-container .qa-chat .message .prose p,
html body .gradio-container .result-markdown p,
html body .gradio-container .feature-output .prose p {
font-size: var(--type-body) !important;
line-height: var(--leading-reading) !important;
}
html body .gradio-container .qa-composer-row .qa-input textarea,
html body .gradio-container .qa-input textarea {
font-size: 1rem !important;
}
.gradio-container,
.gradio-container * {
font-synthesis: none !important;
}
.gradio-container :where(h1, h2, h3, h4) {
text-wrap: balance;
overflow-wrap: anywhere;
}
.gradio-container :where(p, li) {
font-size: var(--type-body);
line-height: var(--leading-body);
overflow-wrap: anywhere;
}
.gradio-container :where(label, .gr-label, .block-title, .label-wrap span) {
font-size: var(--type-label) !important;
line-height: 1.45 !important;
}
.gradio-container :where(button, input, select, textarea) {
font-family: var(--font-sans) !important;
}
.gradio-container :where(button) {
font-weight: 600 !important;
}
.gradio-container .hero-copy h1 {
font-size: var(--type-display) !important;
font-weight: 600 !important;
letter-spacing: -0.035em !important;
line-height: 1.04 !important;
}
.gradio-container .hero-copy p {
max-width: 68ch;
font-size: var(--type-body-large) !important;
line-height: 1.68 !important;
}
.gradio-container :where(.panel-heading h2, .summary-heading h2, .quiz-heading h2, .flashcard-heading h2, .qa-heading h2) {
font-size: var(--type-heading) !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
}
.gradio-container :where(.eyebrow, .qa-eyebrow, .summary-eyebrow, .quiz-eyebrow, .flashcard-eyebrow, .workflow-label) {
font-size: var(--type-caption) !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
line-height: 1.4 !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) {
max-width: 72ch;
overflow-wrap: anywhere;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) p {
margin-block: 0 0 1em;
font-size: var(--type-body) !important;
line-height: var(--leading-reading) !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) :where(h1, h2, h3) {
margin-block: 1.25em 0.5em;
font-weight: 600 !important;
letter-spacing: -0.018em !important;
line-height: 1.3 !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) h1 {
font-size: 1.5rem !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) h2 {
font-size: 1.25rem !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) h3 {
font-size: 1.0625rem !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) :where(code, pre, .citation, [class*="citation"], [class*="chunk"]) {
font-family: var(--font-mono) !important;
font-size: var(--type-caption) !important;
line-height: 1.55 !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.gradio-container :where(.source-file-picker .filename, .source-file-picker td.filename, .scope-summary-files, .scope-summary-page) {
overflow-wrap: anywhere;
word-break: break-word;
}
.gradio-container .qa-chat .message .prose {
font-size: var(--type-body) !important;
line-height: var(--leading-reading) !important;
}
.gradio-container .qa-composer-row .qa-input textarea,
.gradio-container .qa-input textarea {
font-size: 1rem !important;
line-height: 1.45 !important;
}
@media (max-width: 640px) {
.gradio-container .hero-copy h1 {
font-size: clamp(2.25rem, 11vw, 3.6rem) !important;
letter-spacing: -0.03em !important;
}
.gradio-container :where(.result-markdown, .feature-output .prose, .qa-chat .message .prose) {
max-width: none;
}
}
.qa-composer-row {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
}
.qa-composer-row > div {
min-width: 0 !important;
max-width: none !important;
}
.qa-composer-row > div:first-child {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
}
.qa-composer-row > div:last-child {
flex: 0 0 56px !important;
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
}
.qa-composer-row .qa-input,
.qa-composer-row .qa-input > div,
.qa-composer-row .qa-input .wrap,
.qa-composer-row .qa-input .container {
flex: 1 1 auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.qa-composer-row .qa-input textarea {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
#qa-query,
#qa-query > div,
#qa-query .wrap,
#qa-query .container {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
#qa-query textarea {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
#qa-send,
#qa-send > button {
flex: 0 0 56px !important;
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
height: 56px !important;
min-height: 56px !important;
}
.qa-chat .message.user > div,
.qa-chat .message.user .bubble-wrap,
.qa-chat .message.user .message-content,
.qa-chat .message.user .prose {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.feature-sub {
margin-bottom: var(--space-4) !important;
}
.feature-layout {
display: grid !important;
grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr) !important;
gap: var(--space-6) !important;
align-items: start !important;
}
.feature-controls,
.feature-output {
min-width: 0 !important;
padding: var(--space-5) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-card) !important;
background: var(--surface-input) !important;
}
.summary-panel-heading {
display: block;
margin-bottom: var(--space-4) !important;
}
.summary-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-2) 0 0;
}
.summary-eyebrow {
margin-bottom: var(--space-2);
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.summary-heading h2 {
margin: 0;
color: var(--text-primary);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 590;
letter-spacing: -0.03em;
}
.summary-heading p {
margin: var(--space-2) 0 0;
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1.5;
}
.summary-status {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
min-height: 32px;
padding: 0 var(--space-3);
border: 1px solid rgba(54, 179, 126, 0.28);
border-radius: var(--radius-round);
color: var(--text-secondary);
background: rgba(54, 179, 126, 0.08);
font-size: 0.75rem;
font-weight: 590;
}
.summary-status span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.12);
}
.summary-presets {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
.summary-presets > span {
padding: 5px 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-round);
color: var(--text-tertiary);
background: rgba(255, 255, 255, 0.025);
font-size: 0.75rem;
}
.summary-presets .summary-presets-label {
padding-left: 0;
border: 0;
color: var(--text-disabled);
background: transparent;
font-weight: 590;
}
.summary-panel-layout {
align-items: stretch !important;
}
.summary-panel-controls,
.summary-panel-output {
background: linear-gradient(145deg, rgba(113, 112, 255, 0.045), transparent 42%), var(--surface-input) !important;
}
.summary-panel-output {
position: relative;
}
.summary-result {
min-height: 320px !important;
padding: var(--space-4) !important;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
background: rgba(255, 255, 255, 0.018);
}
.summary-result h3:first-child {
margin-top: 0 !important;
color: var(--text-primary) !important;
}
.summary-result:empty::before {
content: "Your generated brief will appear here.";
display: block;
color: var(--text-disabled);
}
.quiz-panel-heading {
display: block;
margin-bottom: var(--space-4) !important;
}
.quiz-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-2) 0 0;
}
.quiz-eyebrow {
margin-bottom: var(--space-2);
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.quiz-heading h2 {
margin: 0;
color: var(--text-primary);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 590;
letter-spacing: -0.03em;
}
.quiz-heading p {
margin: var(--space-2) 0 0;
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1.5;
}
.quiz-status {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
min-height: 32px;
padding: 0 var(--space-3);
border: 1px solid rgba(113, 112, 255, 0.28);
border-radius: var(--radius-round);
color: var(--text-secondary);
background: var(--accent-wash);
font-size: 0.75rem;
font-weight: 590;
}
.quiz-status span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-hover);
box-shadow: 0 0 0 4px rgba(113, 112, 255, 0.12);
}
.quiz-panel > .feature-sub {
display: none !important;
}
.flashcard-panel-heading {
display: block;
margin-bottom: var(--space-4) !important;
}
.flashcard-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-2) 0 0;
}
.flashcard-eyebrow {
margin-bottom: var(--space-2);
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.flashcard-heading h2 {
margin: 0;
color: var(--text-primary);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 590;
letter-spacing: -0.03em;
}
.flashcard-heading p {
max-width: 44rem;
margin: var(--space-2) 0 0;
color: var(--text-tertiary);
font-size: 0.9rem;
line-height: 1.5;
}
.flashcard-status {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
min-height: 32px;
padding: 0 var(--space-3);
border: 1px solid rgba(54, 179, 126, 0.28);
border-radius: var(--radius-round);
color: var(--text-secondary);
background: rgba(54, 179, 126, 0.08);
font-size: 0.75rem;
font-weight: 590;
}
.flashcard-status span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.12);
}
.flashcard-mode-note {
margin-top: var(--space-4);
color: var(--text-disabled);
font-size: 0.75rem;
}
.flashcard-panel > .feature-sub {
display: none !important;
}
@media (max-width: 760px) {
.flashcard-heading {
display: block;
}
.flashcard-status {
margin-top: var(--space-3);
}
}
@media (max-width: 760px) {
.quiz-heading {
display: block;
}
.quiz-status {
margin-top: var(--space-3);
}
}
@media (max-width: 760px) {
.summary-heading {
display: block;
}
.summary-status {
margin-top: var(--space-3);
}
}
.result-markdown {
min-height: 260px;
}
.result-markdown h1,
.result-markdown h2,
.result-markdown h3 {
color: var(--text-primary) !important;
font-weight: 510 !important;
letter-spacing: -0.018em !important;
}
.result-markdown p,
.result-markdown li {
color: var(--text-secondary) !important;
line-height: 1.65 !important;
}
.qa-heading-shell {
margin: 0 0 var(--space-4) !important;
}
.qa-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-2) 0 0;
}
.qa-eyebrow {
margin-bottom: var(--space-2);
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.qa-heading h2 {
margin: 0;
color: var(--text-primary);
font-size: clamp(1.3rem, 2vw, 1.65rem);
font-weight: 590;
letter-spacing: -0.025em;
}
.qa-heading p {
max-width: 42rem;
margin: var(--space-2) 0 0;
color: var(--text-tertiary);
font-size: 0.875rem;
line-height: 1.5;
}
.qa-scope-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--space-2);
min-height: 32px;
padding: 0 var(--space-3);
border: 1px solid rgba(113, 112, 255, 0.24);
border-radius: var(--radius-round);
color: var(--text-secondary);
background: var(--accent-wash);
font-size: 0.75rem;
font-weight: 590;
}
.qa-scope-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-success);
box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.12);
}
.qa-chat {
overflow: hidden;
min-height: 280px !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-panel) !important;
background:
radial-gradient(circle at 50% 0, rgba(113, 112, 255, 0.08), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
var(--surface-input) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.qa-chat > div {
min-height: inherit !important;
}
.qa-chat .message-wrap {
max-width: 100%;
padding: var(--space-3) var(--space-4) !important;
}
.qa-chat .message {
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-card) !important;
color: var(--text-secondary) !important;
background: var(--surface-elevated) !important;
line-height: 1.65 !important;
}
.qa-chat .message.user {
max-width: min(70%, 44rem);
margin-left: auto !important;
border-color: rgba(113, 112, 255, 0.3) !important;
color: var(--text-primary) !important;
background: linear-gradient(145deg, rgba(113, 112, 255, 0.2), rgba(94, 106, 210, 0.1)) !important;
}
.qa-chat .message.bot {
max-width: min(94%, 58rem);
border-left: 2px solid var(--accent-primary) !important;
background: rgba(23, 24, 27, 0.92) !important;
}
.qa-chat .message .prose {
color: var(--text-secondary) !important;
font-size: 0.9375rem !important;
line-height: 1.68 !important;
}
.qa-chat .message .prose p:first-child {
margin-top: 0 !important;
}
.qa-chat .message .prose p:last-child {
margin-bottom: 0 !important;
}
.qa-chat .message .prose h2,
.qa-chat .message .prose h3 {
margin-top: var(--space-5) !important;
color: var(--text-primary) !important;
letter-spacing: -0.018em;
}
.qa-chat .message .prose h2 {
font-size: 1.1rem !important;
}
.qa-chat .message .prose h3 {
font-size: 0.9375rem !important;
}
.qa-chat .message .prose details {
margin-top: var(--space-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.02);
}
.qa-chat .message .prose details summary {
padding: var(--space-2) var(--space-3);
color: var(--text-secondary);
cursor: pointer;
font-size: 0.8125rem;
font-weight: 590;
}
.qa-chat .message .prose details > *:not(summary) {
padding-inline: var(--space-3);
}
.qa-chat .message .prose code {
color: #d6d8ff;
background: rgba(113, 112, 255, 0.12);
}
.qa-chat [class*="actions"] {
top: var(--space-2) !important;
right: var(--space-2) !important;
gap: var(--space-1) !important;
padding: var(--space-1) !important;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: rgba(15, 16, 18, 0.86);
backdrop-filter: blur(12px);
}
.qa-chat [class*="actions"] button {
width: 30px !important;
height: 30px !important;
color: var(--text-tertiary) !important;
}
.qa-chat [class*="actions"] button:hover {
color: var(--text-primary) !important;
background: var(--surface-hover) !important;
}
.qa-chat .placeholder {
color: var(--text-tertiary) !important;
font-size: 0.95rem !important;
}
.qa-composer {
margin-top: var(--space-4) !important;
padding: var(--space-4) !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-panel) !important;
background: var(--surface-panel) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}
.qa-composer-hint,
.qa-composer-meta,
.qa-grounding-note {
margin: 0 !important;
color: var(--text-tertiary) !important;
font-size: 0.75rem !important;
line-height: 1.45 !important;
}
.qa-composer-hint strong {
color: var(--text-secondary);
font-weight: 590;
}
.qa-input {
margin: var(--space-3) 0 var(--space-2) !important;
}
.qa-input textarea {
min-height: 52px !important;
padding: 0 var(--space-12) 0 var(--space-4) !important;
border: 1px solid var(--border-strong) !important;
border-radius: var(--radius-control) !important;
color: var(--text-primary) !important;
background: var(--surface-elevated) !important;
font-size: 0.9375rem !important;
line-height: 52px !important;
transition:
border-color 140ms ease-out,
box-shadow 140ms ease-out,
background-color 140ms ease-out;
}
.qa-input textarea:hover {
border-color: rgba(255, 255, 255, 0.24) !important;
background: var(--surface-hover) !important;
}
.qa-input textarea:focus {
border-color: var(--accent-bright) !important;
box-shadow: 0 0 0 3px var(--accent-wash) !important;
outline: none !important;
}
.qa-input button {
width: 40px !important;
height: 40px !important;
margin-right: var(--space-2) !important;
border: 1px solid rgba(113, 112, 255, 0.4) !important;
border-radius: 9px !important;
color: var(--text-primary) !important;
background: var(--action-primary) !important;
}
.qa-input button:hover {
background: var(--action-hover) !important;
}
.qa-actions {
align-items: center !important;
justify-content: space-between !important;
gap: var(--space-4) !important;
margin-top: var(--space-3) !important;
}
.clear-chat-btn {
flex: 0 0 auto !important;
min-height: 36px !important;
margin: 0 !important;
border-color: var(--border-default) !important;
color: var(--text-tertiary) !important;
background: transparent !important;
font-size: 0.75rem !important;
}
.clear-chat-btn:hover {
border-color: rgba(224, 98, 108, 0.45) !important;
color: #f09ba2 !important;
background: rgba(224, 98, 108, 0.08) !important;
}
.library-actions {
display: flex !important;
justify-content: flex-end !important;
gap: var(--space-2) !important;
margin-bottom: 0 !important;
}
.library-actions > button {
flex: 0 1 auto !important;
min-width: 132px !important;
}
.library-refresh-btn::before,
.library-delete-btn::before {
display: inline-block;
width: 18px;
height: 18px;
margin-right: var(--space-2);
background: currentColor;
content: "";
vertical-align: -4px;
}
.library-refresh-btn::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.library-delete-btn::before {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gradio-container .library-delete-btn {
border-color: rgba(224, 98, 108, 0.24) !important;
color: #e8848d !important;
}
.gradio-container .library-delete-btn:hover:not(:disabled) {
border-color: rgba(224, 98, 108, 0.45) !important;
background: rgba(224, 98, 108, 0.08) !important;
color: #f09ba2 !important;
}
.delete-confirmation {
margin-top: var(--space-3) !important;
padding: var(--space-3) var(--space-4) !important;
border: 1px solid rgba(224, 98, 108, 0.28) !important;
border-radius: var(--radius-card) !important;
color: var(--text-secondary) !important;
background: rgba(224, 98, 108, 0.06) !important;
font-size: 0.8125rem !important;
line-height: 1.5 !important;
}
.delete-confirmation-actions {
gap: var(--space-2) !important;
margin-top: var(--space-2) !important;
}
.delete-confirmation-actions > button {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.gradio-container .library-delete-confirm-btn {
border-color: rgba(224, 98, 108, 0.45) !important;
color: #f09ba2 !important;
background: rgba(224, 98, 108, 0.1) !important;
}
.library-document-picker,
.library-page-picker {
padding: var(--space-4) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-card) !important;
background: var(--surface-input) !important;
}
.library-document-picker {
min-height: 108px;
}
.library-document-picker [data-testid="block-info"],
.library-page-picker [data-testid="block-info"] {
margin-bottom: var(--space-1);
color: var(--text-primary) !important;
font-size: 0.8125rem !important;
font-weight: 590 !important;
}
.library-document-picker .info,
.library-page-picker .info {
color: var(--text-tertiary) !important;
font-size: 0.75rem !important;
line-height: 1.45 !important;
}
.library-page-picker .secondary-wrap {
position: relative;
}
.library-page-picker .secondary-wrap::before {
position: absolute;
z-index: 1;
top: 50%;
left: var(--space-3);
width: var(--space-4);
height: var(--space-4);
color: var(--text-tertiary);
background: currentColor;
content: "";
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 12h7M9 16h7'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
transform: translateY(-50%);
}
.library-page-picker input[role="combobox"] {
min-height: 44px;
padding: 0 var(--space-10) 0 var(--space-10) !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-control) !important;
color: var(--text-secondary) !important;
background: var(--surface-elevated) !important;
font-size: 0.875rem !important;
font-weight: 510 !important;
letter-spacing: -0.006em;
opacity: 1 !important;
transition:
border-color 140ms ease-out,
background-color 140ms ease-out;
}
.library-page-picker input[role="combobox"]:hover:not(:disabled) {
border-color: var(--border-strong) !important;
background: var(--surface-hover) !important;
}
.library-page-picker input[role="combobox"]:focus-visible {
border-color: var(--accent-bright) !important;
outline: 2px solid var(--accent-wash) !important;
outline-offset: 2px;
}
.library-page-picker input[role="combobox"]:disabled {
color: var(--text-tertiary) !important;
-webkit-text-fill-color: var(--text-tertiary);
}
.library-document-picker [data-testid="checkbox-group"] {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2) !important;
margin-top: var(--space-3);
}
.library-document-picker [data-testid="checkbox-group"] > label {
min-width: 0;
min-height: 44px;
padding: var(--space-3) !important;
border: 1px solid var(--border-default);
border-radius: 9px;
background: var(--surface-elevated);
transition:
border-color 140ms ease-out,
background-color 140ms ease-out;
}
.library-document-picker [data-testid="checkbox-group"] > label:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
}
.library-document-picker [data-testid="checkbox-group"] > label span {
overflow: hidden;
color: var(--text-secondary);
font-size: 0.8125rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.library-document-picker [data-testid="checkbox-group"]:empty::after {
color: var(--text-disabled);
content: "No indexed documents yet.";
font-size: 0.8125rem;
}
.library-page-picker input:disabled {
cursor: not-allowed;
}
.library-page-picker {
position: relative;
overflow: visible !important;
background:
linear-gradient(135deg, rgba(113, 112, 255, 0.07), transparent 58%),
var(--surface-input) !important;
}
.library-page-picker [data-testid="block-info"] {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: var(--space-2) !important;
letter-spacing: -0.012em;
}
.library-page-picker [data-testid="block-info"]::after {
padding: 3px 7px;
border: 1px solid var(--border-default);
border-radius: 6px;
color: var(--text-tertiary);
background: rgba(8, 9, 10, 0.42);
content: "Scope";
font-size: 0.6875rem;
font-weight: 590;
letter-spacing: 0.035em;
line-height: 1.2;
text-transform: uppercase;
}
.library-page-picker .info {
max-width: 58ch;
margin-top: var(--space-1);
text-wrap: pretty;
}
.library-page-picker .secondary-wrap {
padding-top: var(--space-1);
}
.library-page-picker input[role="combobox"] {
min-height: 50px;
padding-left: 48px !important;
padding-right: 48px !important;
color: var(--text-primary) !important;
background: rgba(23, 24, 27, 0.88) !important;
font-size: 0.9375rem !important;
font-weight: 590 !important;
}
.library-page-picker input[role="combobox"]::placeholder {
color: var(--text-tertiary) !important;
}
.library-page-picker:has(input[role="combobox"]:not(:disabled)) {
border-color: rgba(113, 112, 255, 0.28) !important;
}
.library-page-picker:has(input[role="combobox"]:not(:disabled))
[data-testid="block-info"] {
color: var(--accent-bright) !important;
}
.library-page-picker:has(input[role="combobox"]:focus-visible),
.library-page-picker:has(input[role="combobox"][aria-expanded="true"]) {
border-color: rgba(113, 112, 255, 0.5) !important;
background:
linear-gradient(135deg, rgba(113, 112, 255, 0.11), transparent 62%),
var(--surface-input) !important;
}
.library-page-picker:has(input[role="combobox"]:disabled) {
opacity: 0.82;
}
.library-page-picker:has(input[role="combobox"]:disabled)
[data-testid="block-info"]::after {
color: var(--text-disabled);
border-color: var(--border-subtle);
background: rgba(8, 9, 10, 0.22);
content: "Select 1 PDF";
font-size: 0.625rem;
letter-spacing: 0.02em;
}
/* Footer */
.footer-text {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-8) 0 var(--space-4);
border-top: 1px solid var(--border-subtle);
color: var(--text-disabled);
font-size: 0.75rem;
}
.footer-text span {
color: var(--text-tertiary);
font-weight: 510;
}
.gradio-container footer {
color: var(--text-disabled) !important;
opacity: 0.66;
}
.gradio-container {
background-color: var(--surface-canvas) !important;
background-image: none !important;
}
html,
body,
#root,
#root > div {
background-color: var(--surface-canvas) !important;
background-image: none !important;
}
body::before,
body::after {
display: none !important;
content: none !important;
}
.gradio-container .hero-shell,
.gradio-container .hero-copy,
.gradio-container .hero-copy h1,
.gradio-container .hero-copy h1 span,
.gradio-container .hero-copy p,
.gradio-container .eyebrow {
font-family: var(--font-sans) !important;
}
.gradio-container .eyebrow {
color: var(--accent-hover) !important;
font-size: 0.75rem !important;
font-weight: 510 !important;
letter-spacing: 0.075em !important;
}
.gradio-container .hero-copy h1 {
margin: 0 !important;
color: var(--text-primary) !important;
font-size: clamp(2.5rem, 5.6vw, 4.5rem) !important;
font-weight: 510 !important;
letter-spacing: -0.045em !important;
line-height: 1.02 !important;
}
.gradio-container .hero-copy h1 span {
color: var(--text-tertiary) !important;
}
.gradio-container .hero-copy p {
color: var(--text-secondary) !important;
font-size: 1.0625rem !important;
line-height: 1.65 !important;
}
.gradio-container .qa-heading,
.gradio-container .qa-heading h2,
.gradio-container .qa-heading p,
.gradio-container .qa-eyebrow,
.gradio-container .qa-scope-badge {
font-family: var(--font-sans) !important;
}
.gradio-container .qa-eyebrow {
color: var(--accent-hover) !important;
font-size: 0.6875rem !important;
font-weight: 600 !important;
letter-spacing: 0.11em !important;
}
.gradio-container .qa-heading h2 {
color: var(--text-primary) !important;
font-size: clamp(1.3rem, 2vw, 1.65rem) !important;
font-weight: 590 !important;
letter-spacing: -0.025em !important;
}
.gradio-container .qa-heading p {
color: var(--text-tertiary) !important;
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
.gradio-container .qa-scope-badge {
color: var(--text-secondary) !important;
font-size: 0.75rem !important;
font-weight: 590 !important;
}
.gradio-container .summary-heading,
.gradio-container .summary-heading h2,
.gradio-container .summary-heading p,
.gradio-container .summary-eyebrow,
.gradio-container .summary-status,
.gradio-container .quiz-heading,
.gradio-container .quiz-heading h2,
.gradio-container .quiz-heading p,
.gradio-container .quiz-eyebrow,
.gradio-container .quiz-status,
.gradio-container .flashcard-heading,
.gradio-container .flashcard-heading h2,
.gradio-container .flashcard-heading p,
.gradio-container .flashcard-eyebrow,
.gradio-container .flashcard-status,
.gradio-container .flashcard-mode-note {
font-family: var(--font-sans) !important;
}
.gradio-container .summary-eyebrow,
.gradio-container .quiz-eyebrow,
.gradio-container .flashcard-eyebrow {
color: var(--accent-hover) !important;
font-size: 0.6875rem !important;
font-weight: 650 !important;
letter-spacing: 0.12em !important;
}
.gradio-container .summary-heading h2,
.gradio-container .quiz-heading h2,
.gradio-container .flashcard-heading h2 {
color: var(--text-primary) !important;
font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
font-weight: 590 !important;
letter-spacing: -0.03em !important;
}
.gradio-container .summary-heading p,
.gradio-container .quiz-heading p,
.gradio-container .flashcard-heading p {
color: var(--text-tertiary) !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
.gradio-container .summary-status,
.gradio-container .quiz-status,
.gradio-container .flashcard-status {
color: var(--text-secondary) !important;
font-size: 0.75rem !important;
font-weight: 590 !important;
}
.gradio-container .summary-status {
border-color: rgba(213, 168, 63, 0.3) !important;
background: rgba(213, 168, 63, 0.1) !important;
}
.gradio-container .summary-status span {
background: var(--status-warning) !important;
box-shadow: 0 0 0 4px rgba(213, 168, 63, 0.12) !important;
}
.gradio-container .flashcard-mode-note {
color: var(--text-disabled) !important;
font-size: 0.75rem !important;
}
.gradio-container .workflow-strip,
.gradio-container .workflow-intro,
.gradio-container .workflow-intro strong,
.gradio-container .workflow-steps,
.gradio-container .workflow-steps li {
font-family: var(--font-sans) !important;
}
.gradio-container .workflow-strip {
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-panel) !important;
background: var(--surface-glass) !important;
}
.gradio-container .workflow-label,
.gradio-container .workflow-steps span {
font-family: var(--font-mono) !important;
}
.gradio-container .workflow-label {
color: var(--status-warning) !important;
font-size: 0.75rem !important;
letter-spacing: 0.06em !important;
}
.gradio-container .workflow-intro strong {
color: var(--text-primary) !important;
font-size: 0.9375rem !important;
font-weight: 510 !important;
}
.gradio-container .workflow-steps li {
color: var(--text-secondary) !important;
font-size: 0.8125rem !important;
}
.gradio-container .workflow-steps span {
color: var(--text-disabled) !important;
font-size: 0.6875rem !important;
}
.gradio-container .scope-summary-shell {
margin: 0 0 var(--space-4) !important;
}
.gradio-container .scope-summary {
display: flex;
min-width: 0;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
padding: var(--space-3) var(--space-4) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-card) !important;
color: var(--text-secondary) !important;
background: linear-gradient(135deg, var(--accent-wash), transparent 62%), var(--surface-input) !important;
font-size: 0.8125rem !important;
line-height: 1.4 !important;
}
.gradio-container .scope-summary-status {
color: var(--text-tertiary) !important;
font-family: var(--font-mono) !important;
font-size: 0.6875rem !important;
letter-spacing: 0.05em !important;
text-transform: uppercase;
}
.gradio-container .scope-summary-ready {
color: var(--status-success) !important;
}
.gradio-container .scope-summary strong {
color: var(--text-primary) !important;
font-weight: 590 !important;
}
.gradio-container .scope-summary-files,
.gradio-container .scope-summary-page {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gradio-container .scope-summary-page {
color: var(--text-tertiary) !important;
}
.gradio-container .main-layout,
.gradio-container .scope-summary-shell,
.gradio-container .learning-tabs {
width: calc(100% - var(--space-3) - var(--space-3)) !important;
margin-inline: var(--space-3) !important;
}
.gradio-container .scope-summary-shell {
margin-bottom: var(--space-4) !important;
}
.gradio-container .hero-shell {
min-height: 320px !important;
padding-top: var(--space-12) !important;
padding-bottom: var(--space-10) !important;
}
@media (min-width: 1025px) {
.gradio-container .hero-shell {
height: 368px !important;
min-height: 368px !important;
}
}
/* Responsive */
@media (max-width: 1024px) {
.hero-shell {
grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.55fr);
min-height: 360px;
}
.gradio-container .hero-shell {
min-height: 290px !important;
}
.brand-shell {
min-height: 456px;
}
.main-layout {
grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) !important;
}
.workflow-strip {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.gradio-container .hero-shell {
min-height: auto !important;
padding-top: var(--space-12) !important;
padding-bottom: var(--space-10) !important;
}
.gradio-container {
padding-inline: var(--space-4) !important;
}
.product-header {
min-height: 60px;
height: 60px;
flex-basis: 60px;
}
.header-status {
display: none;
}
.hero-shell {
grid-template-columns: 1fr;
min-height: auto;
padding: var(--space-12) 0 var(--space-10);
}
.brand-shell {
min-height: 0;
}
.hero-copy h1 {
font-size: clamp(2.35rem, 11vw, 3.6rem);
}
.hero-visual {
min-height: 230px;
height: 230px;
}
.document-stack {
transform: scale(0.82) rotate(4deg);
}
.workflow-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--space-3);
}
.main-layout,
.feature-layout {
grid-template-columns: minmax(0, 1fr) !important;
}
.control-stack {
padding: var(--space-6) var(--space-5) !important;
}
.preview-col,
.learning-tabs .tabitem {
padding: var(--space-5) !important;
}
.library-document-picker [data-testid="checkbox-group"] {
grid-template-columns: minmax(0, 1fr);
}
.qa-chat {
height: 420px !important;
}
}
@media (max-width: 480px) {
.gradio-container {
padding-inline: var(--space-3) !important;
}
.hero-shell {
padding-top: var(--space-10);
}
.hero-copy h1 br {
display: none;
}
.hero-copy p {
font-size: 1rem;
}
.hero-visual {
min-height: 205px;
height: 205px;
}
.workflow-strip,
.preview-col,
.learning-tabs .tabitem {
padding: var(--space-4) !important;
}
.control-stack {
padding: var(--space-5) var(--space-4) !important;
}
.workflow-steps {
grid-template-columns: minmax(0, 1fr);
}
.workflow-steps li {
white-space: normal;
}
.panel-heading {
align-items: center;
}
.library-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.library-actions > button {
min-width: 0 !important;
padding-inline: var(--space-2) !important;
font-size: 0.75rem !important;
}
.library-stat {
display: grid;
gap: 2px;
padding: var(--space-2);
}
.library-stat span {
overflow: hidden;
font-size: 0.6875rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.library-refresh-btn::before,
.library-delete-btn::before {
margin-right: var(--space-1);
}
.doc-summary {
padding: var(--space-3) !important;
}
.feature-slider .head {
grid-template-columns: minmax(0, 1fr) !important;
gap: var(--space-2);
}
.feature-slider .tab-like-container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) var(--space-8) !important;
width: 100% !important;
}
.feature-slider input[data-testid="number-input"] {
width: 100% !important;
min-width: 0 !important;
}
}
/* Interactive output container */
.interactive-output {
min-height: 260px;
}
/* =========== Interactive Quiz (iq-) =========== */
.iq-root {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.iq-header {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-tertiary);
font-size: 0.8125rem;
}
.iq-progress {
color: var(--accent-hover);
font-family: var(--font-mono);
font-size: 0.75rem;
}
.iq-modebar {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
color: var(--text-disabled);
font-size: 0.75rem;
}
.iq-mode-label {
margin-right: var(--space-1);
color: var(--text-tertiary);
font-weight: 590;
}
.iq-mode-btn {
min-height: 28px;
padding: 0 var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-round);
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
font-size: 0.75rem;
}
.iq-mode-btn:hover,
.iq-mode-btn.iq-mode-active {
border-color: var(--accent-bright);
background: var(--accent-wash);
color: var(--accent-hover);
}
.iq-shortcuts {
margin-left: auto;
color: var(--text-disabled);
font-family: var(--font-mono);
font-size: 0.6875rem;
}
.iq-card {
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
background: var(--surface-elevated);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.iq-question {
min-height: 132px;
padding: var(--space-6) var(--space-6) var(--space-4);
color: var(--text-primary);
font-size: 1.0625rem;
font-weight: 510;
letter-spacing: -0.012em;
line-height: 1.5;
}
.iq-question-index {
display: inline-grid;
width: 30px;
height: 30px;
margin-right: var(--space-3);
place-items: center;
border: 1px solid rgba(113, 112, 255, 0.35);
border-radius: 10px;
color: var(--accent-hover);
background: var(--accent-wash);
font-family: var(--font-mono);
font-size: 0.75rem;
vertical-align: middle;
}
.iq-difficulty {
display: inline-block;
margin-right: var(--space-3);
padding: 3px 8px;
border: 1px solid rgba(255, 187, 92, 0.24);
border-radius: var(--radius-round);
color: #f2bf72;
background: rgba(255, 187, 92, 0.08);
font-size: 0.6875rem;
font-weight: 590;
vertical-align: middle;
}
.iq-options {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0 var(--space-6) var(--space-6);
}
.iq-option {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 46px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: var(--surface-input);
color: var(--text-secondary);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.9375rem;
text-align: left;
transition:
background 120ms ease-out,
border-color 120ms ease-out,
color 120ms ease-out;
}
.iq-option:hover:not(.iq-correct):not(.iq-wrong):not(.iq-disabled) {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text-primary);
}
.iq-option-label {
display: grid;
flex: 0 0 28px;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid var(--border-default);
border-radius: 50%;
background: var(--surface-panel);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
transition: inherit;
}
.iq-option-text {
flex: 1;
}
.iq-correct {
border-color: var(--status-success) !important;
background: rgba(54, 179, 126, 0.12) !important;
color: var(--text-primary) !important;
}
.iq-correct .iq-option-label {
border-color: var(--status-success);
background: var(--status-success);
color: #fff;
}
.iq-wrong {
border-color: var(--status-error) !important;
background: rgba(224, 98, 108, 0.1) !important;
color: var(--text-primary) !important;
}
.iq-wrong .iq-option-label {
border-color: var(--status-error);
background: var(--status-error);
color: #fff;
}
.iq-disabled {
cursor: default !important;
opacity: 0.65;
}
.iq-disabled:hover {
border-color: var(--border-subtle) !important;
background: var(--surface-input) !important;
color: var(--text-secondary) !important;
}
.iq-explain {
padding: var(--space-4) var(--space-6) var(--space-6);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: 0.875rem;
line-height: 1.55;
}
.iq-explain strong {
color: var(--accent-hover);
font-weight: 600;
}
.iq-sources {
display: grid;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--border-subtle);
}
.iq-sources-label {
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.iq-sources details {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.02);
}
.iq-sources summary {
padding: var(--space-2) var(--space-3);
color: var(--accent-hover);
cursor: pointer;
font-size: 0.75rem;
}
.iq-sources details > div {
padding: var(--space-3);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: 0.8125rem;
line-height: 1.55;
white-space: pre-wrap;
}
.iq-nav {
display: flex;
gap: var(--space-3);
}
.iq-nav button,
.iq-score-btn {
min-height: 40px;
padding: 0 var(--space-5);
border: 1px solid var(--border-default);
border-radius: var(--radius-control);
background: var(--surface-elevated);
color: var(--text-secondary);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 510;
transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.iq-next-btn {
margin-left: auto;
border-color: var(--accent-bright) !important;
background: var(--accent-wash) !important;
color: var(--accent-hover) !important;
}
.iq-next-btn:hover:not(:disabled) {
background: rgba(113, 112, 255, 0.2) !important;
}
.iq-nav button:hover:not(:disabled),
.iq-score-btn:hover:not(:disabled) {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text-primary);
}
.iq-nav button:disabled {
cursor: default;
opacity: 0.4;
}
.iq-score-btn {
background: var(--accent-wash);
border-color: var(--accent-bright);
color: var(--accent-hover);
}
.iq-score-btn:hover:not(:disabled) {
background: rgba(113, 112, 255, 0.2) !important;
}
.iq-score {
padding: var(--space-6);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
background: var(--surface-input);
text-align: center;
}
.iq-score-kicker {
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.iq-accuracy {
margin-top: var(--space-2);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 0.8125rem;
}
.iq-score-actions {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-5);
flex-wrap: wrap;
}
.iq-score-num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--accent-hover);
font-family: var(--font-mono);
font-size: 2.25rem;
font-weight: 700;
line-height: 1;
}
.iq-score-total {
position: absolute;
top: calc(50% + 20px);
left: 50%;
transform: translateX(-50%);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 0.75rem;
}
.iq-score-label {
margin-top: var(--space-2);
color: var(--text-tertiary);
font-size: 0.875rem;
}
.iq-score-detail {
margin-top: var(--space-3);
display: flex;
justify-content: center;
gap: var(--space-6);
font-size: 0.8125rem;
}
.iq-score-detail span {
color: var(--text-secondary);
}
/* Score reveal animation */
.iq-score-reveal {
animation: iq-score-reveal 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes iq-score-reveal {
from {
opacity: 0;
transform: scale(0.82) translateY(12px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Progress ring */
.iq-score-ring {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
margin: 0 auto;
}
.iq-ring-bg {
stroke: var(--border-subtle);
}
.iq-ring-fill {
stroke: var(--accent-bright);
transition: stroke-dashoffset 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 0 6px var(--accent-glow));
}
/* Verdict strip */
.iq-verdict-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: var(--space-4);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-control);
background: var(--surface-panel);
}
.iq-vdot {
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
transition: transform 150ms ease;
}
.iq-vdot:hover {
transform: scale(1.5);
}
.iq-vdot-correct {
background: var(--status-success);
box-shadow: 0 0 4px rgba(54, 179, 126, 0.5);
}
.iq-vdot-wrong {
background: var(--status-error);
box-shadow: 0 0 4px rgba(224, 98, 108, 0.5);
}
/* =========== Interactive Flashcards (fc-) =========== */
.fc-root {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.fc-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: var(--text-tertiary);
font-size: 0.8125rem;
}
.fc-progress {
color: var(--accent-hover);
font-family: var(--font-mono);
font-size: 0.75rem;
}
.fc-card-wrapper {
perspective: 1200px;
width: 100%;
max-width: 520px;
height: 320px;
border-radius: var(--radius-card);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.fc-flipped .fc-card-wrapper {
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.3);
}
.fc-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}
.fc-flipped .fc-card-inner {
transform: rotateY(180deg);
}
.fc-face {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-8) var(--space-6);
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
background: var(--surface-elevated);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-align: center;
}
.fc-face h3 {
margin: 0 0 var(--space-1);
color: var(--text-tertiary);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.fc-face p {
margin: 0;
color: var(--text-primary);
font-size: 1.125rem;
line-height: 1.55;
}
.fc-back {
transform: rotateY(180deg);
border-color: var(--accent-primary) !important;
background:
linear-gradient(145deg, var(--accent-wash), transparent 55%),
var(--surface-elevated) !important;
}
.fc-hint {
margin-top: var(--space-3);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.04);
color: var(--text-tertiary);
font-size: 0.8125rem;
font-style: italic;
}
.fc-modebar {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
color: var(--text-disabled);
font-size: 0.75rem;
}
.fc-mode-label {
margin-right: var(--space-1);
color: var(--text-tertiary);
font-weight: 590;
}
.fc-mode-btn {
min-height: 28px;
padding: 0 var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-round);
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
font-size: 0.75rem;
}
.fc-mode-btn:hover,
.fc-mode-btn.fc-mode-active {
border-color: var(--accent-bright);
background: var(--accent-wash);
color: var(--accent-hover);
}
.fc-shortcuts {
margin-left: auto;
color: var(--text-disabled);
font-family: var(--font-mono);
font-size: 0.6875rem;
}
.fc-rating {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex-wrap: wrap;
color: var(--text-disabled);
font-size: 0.75rem;
}
.fc-rating button,
.fc-complete-actions button {
min-height: 34px;
padding: 0 var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: var(--surface-elevated);
color: var(--text-secondary);
cursor: pointer;
font-size: 0.75rem;
}
.fc-rating button:hover,
.fc-complete-actions button:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text-primary);
}
.fc-rating .fc-rating-good {
border-color: rgba(54, 179, 126, 0.32);
background: rgba(54, 179, 126, 0.1);
color: var(--status-success);
}
.fc-complete {
padding: var(--space-6);
border: 1px solid var(--border-default);
border-radius: var(--radius-card);
background: var(--surface-input);
text-align: center;
}
.fc-complete-kicker {
color: var(--accent-hover);
font-size: 0.6875rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.fc-complete h3 {
margin: var(--space-2) 0 0;
color: var(--text-primary);
font-size: 1.05rem;
}
.fc-complete-stats {
display: flex;
justify-content: center;
gap: var(--space-6);
margin: var(--space-5) 0;
}
.fc-complete-stats span {
display: grid;
gap: 2px;
}
.fc-complete-stats strong {
color: var(--accent-hover);
font-family: var(--font-mono);
font-size: 1.5rem;
}
.fc-complete-stats small {
color: var(--text-disabled);
font-size: 0.7rem;
}
.fc-complete-actions {
display: flex;
justify-content: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.fc-sources {
display: grid;
gap: var(--space-2);
margin-top: var(--space-4);
}
.fc-sources details {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-control);
background: rgba(255, 255, 255, 0.025);
}
.fc-sources summary {
padding: var(--space-2) var(--space-3);
color: var(--accent-hover);
cursor: pointer;
font-size: 0.75rem;
}
.fc-sources details > div {
padding: var(--space-3);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: 0.8125rem;
line-height: 1.55;
white-space: pre-wrap;
}
.fc-nav {
display: flex;
gap: var(--space-3);
align-items: center;
}
.fc-nav button {
min-height: 40px;
padding: 0 var(--space-5);
border: 1px solid var(--border-default);
border-radius: var(--radius-control);
background: var(--surface-elevated);
color: var(--text-secondary);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 510;
transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.fc-nav button:hover:not(:disabled) {
border-color: var(--border-strong);
background: var(--surface-hover);
color: var(--text-primary);
}
.fc-nav button:disabled {
cursor: default;
opacity: 0.4;
}
.fc-shuffle-btn {
background: var(--accent-wash) !important;
border-color: var(--accent-bright) !important;
color: var(--accent-hover) !important;
}
.fc-shuffle-btn:hover:not(:disabled) {
background: rgba(113, 112, 255, 0.2) !important;
}
.fc-flip-hint {
position: absolute;
bottom: var(--space-4);
color: var(--text-tertiary);
font-size: 0.6875rem;
opacity: 0.6;
transition: opacity 300ms ease;
}
.fc-face:hover .fc-flip-hint {
opacity: 1;
}
.fc-back .fc-flip-hint {
display: none;
}
/* Mastery buttons */
.fc-mastery {
display: flex;
gap: var(--space-3);
justify-content: center;
}
.fc-mastery button {
min-height: 36px;
padding: 0 var(--space-5);
border: 1px solid var(--border-default);
border-radius: var(--radius-control);
background: var(--surface-elevated);
color: var(--text-secondary);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 510;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.fc-mastery button:hover {
border-color: var(--border-strong);
color: var(--text-primary);
}
.fc-known-btn.fc-active {
border-color: var(--status-success);
background: rgba(54, 179, 126, 0.12);
color: var(--status-success);
}
.fc-unknown-btn.fc-active {
border-color: var(--status-error);
background: rgba(224, 98, 108, 0.1);
color: var(--status-error);
}
/* Filter button */
.fc-filter-btn {
font-family: var(--font-mono) !important;
font-size: 0.75rem !important;
min-width: 70px;
}
/* Slide animation on front text */
@keyframes fc-slide-in {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.fc-card-wrapper {
height: 260px;
}
.fc-face p {
font-size: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* =========== Quiz dynamic additions =========== */
.iq-progress-track {
width: 100%;
height: 4px;
margin: calc(-1 * var(--space-3)) 0 var(--space-2);
background: var(--border-subtle);
border-radius: var(--radius-round);
overflow: hidden;
}
.iq-progress-fill {
height: 100%;
background: var(--accent-bright);
border-radius: var(--radius-round);
transition: width 350ms ease;
}
.iq-verdict-icon {
display: inline-flex;
vertical-align: middle;
width: 18px;
height: 18px;
margin-right: var(--space-1);
}
.iq-verdict-correct {
color: var(--status-success);
}
.iq-verdict-wrong {
color: var(--status-error);
}
.iq-score-detail .iq-verdict-correct,
.iq-score-detail .iq-verdict-wrong {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.iq-card {
animation: iq-fade-in-up 400ms ease both;
}
.iq-option.iq-correct {
animation: iq-pulse-correct 500ms ease;
}
.iq-option.iq-wrong {
animation: iq-pulse-wrong 500ms ease;
}
@keyframes iq-fade-in-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes iq-pulse-correct {
0% {
box-shadow: 0 0 0 0 rgba(54, 179, 126, 0.35);
}
70% {
box-shadow: 0 0 0 8px rgba(54, 179, 126, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(54, 179, 126, 0);
}
}
@keyframes iq-pulse-wrong {
0% {
box-shadow: 0 0 0 0 rgba(224, 98, 108, 0.35);
}
70% {
box-shadow: 0 0 0 8px rgba(224, 98, 108, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(224, 98, 108, 0);
}
}
/* =========== Flashcard dynamic additions =========== */
.fc-dots {
display: flex;
gap: 6px;
align-items: center;
}
.fc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border-default);
transition: background 200ms ease;
}
.fc-dot-active {
background: var(--accent-bright);
box-shadow: 0 0 6px var(--accent-glow);
}
.fc-hint {
transition: opacity 500ms ease;
}
.fc-nav svg {
vertical-align: -2px;
margin-right: 4px;
}
.fc-nav button:last-child svg {
margin-right: 0;
margin-left: 4px;
}
@media (max-width: 640px) {
.qa-heading {
display: block;
}
.qa-scope-badge {
margin-top: var(--space-3);
}
.qa-chat .message.user,
.qa-chat .message.bot {
max-width: 100%;
}
.qa-chat .message-wrap {
padding-inline: var(--space-3) !important;
}
.qa-actions {
align-items: stretch !important;
flex-direction: column !important;
gap: var(--space-2) !important;
}
.qa-grounding-note {
order: 2;
}
.clear-chat-btn {
width: 100% !important;
}
}
@keyframes fc-slide-from-right {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fc-slide-from-left {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.gradio-container .learning-tabs .qa-tab.qa-stage {
width: min(100%, 980px) !important;
max-width: 980px !important;
margin-inline: auto !important;
padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-8)) !important;
}
.qa-chat .message.user {
margin-right: var(--space-4) !important;
}
.qa-chat .message.bot {
margin-right: auto !important;
}
.qa-chat [aria-label*="delete" i],
.qa-chat [aria-label*="share" i] {
display: none !important;
}
.qa-chat .message .prose ul {
padding-left: 1.2rem !important;
}
.qa-chat .message .prose li::marker {
color: var(--accent-hover);
}
.qa-chat .message .prose strong {
color: var(--text-primary) !important;
font-weight: 590 !important;
}
.qa-chat .message .prose h2:first-child {
margin-top: 0 !important;
}
.qa-chat .message .prose hr {
border-color: var(--border-subtle) !important;
}
.qa-chat .message .prose details summary {
color: var(--accent-hover) !important;
}
.qa-composer > .wrap,
.qa-composer > .form,
.qa-composer .block,
.qa-composer .form,
.qa-composer .wrap {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.qa-composer .qa-composer-hint,
.qa-composer .qa-composer-meta {
padding: 0 !important;
background: transparent !important;
}
.qa-composer .qa-input {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.qa-composer .qa-input .wrap,
.qa-composer .qa-input .container {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
@media (max-width: 640px) {
.gradio-container .learning-tabs .qa-tab.qa-stage {
width: 100% !important;
padding: var(--space-5) var(--space-3) !important;
}
.qa-chat .message.user {
margin-right: 0 !important;
}
}
.qa-composer,
.qa-composer > div,
.qa-composer > div > div,
.qa-composer .block,
.qa-composer .form,
.qa-composer .wrap,
.qa-composer .container {
background: transparent !important;
box-shadow: none !important;
}
.qa-composer {
display: grid !important;
gap: var(--space-3) !important;
padding: var(--space-4) !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--radius-panel) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
var(--surface-panel) !important;
}
.qa-composer .qa-composer-note,
.qa-composer .qa-composer-note > div {
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: var(--text-tertiary) !important;
background: transparent !important;
font-size: 0.75rem !important;
line-height: 1.4 !important;
}
.qa-composer .qa-composer-hint {
display: flex;
align-items: center;
gap: var(--space-1);
color: var(--text-secondary) !important;
}
.qa-composer .qa-composer-hint strong {
color: var(--accent-hover) !important;
font-weight: 590 !important;
}
.qa-composer .qa-composer-meta {
color: var(--text-disabled) !important;
}
.qa-composer .qa-input,
.qa-composer .qa-input > div,
.qa-composer .qa-input .wrap,
.qa-composer .qa-input .container {
width: 100% !important;
max-width: none !important;
justify-self: stretch !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.qa-composer .qa-input textarea {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
padding-block: 0 !important;
line-height: 1.45 !important;
resize: none !important;
}
.qa-composer .qa-input > div,
.qa-composer .qa-input .wrap,
.qa-composer .qa-input .container {
display: flex !important;
align-items: center !important;
gap: var(--space-2) !important;
}
.qa-composer .qa-input button {
flex: 0 0 56px !important;
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
height: 56px !important;
min-height: 56px !important;
margin: 0 !important;
align-self: center !important;
border-radius: var(--radius-control) !important;
}
.qa-actions {
margin-top: var(--space-2) !important;
}
.qa-grounding-note {
color: var(--text-disabled) !important;
}
.qa-composer-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 56px !important;
align-items: center !important;
gap: var(--space-2) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.qa-composer-row > .qa-input,
.qa-composer-row > .qa-input > div,
.qa-composer-row > .qa-input .wrap,
.qa-composer-row > .qa-input .container {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.qa-composer-row .qa-input textarea {
display: block !important;
width: 100% !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
padding: 0 var(--space-4) !important;
border: 1px solid var(--border-strong) !important;
border-radius: var(--radius-control) !important;
line-height: 56px !important;
resize: none !important;
}
.qa-composer-row .qa-input textarea:focus {
border-color: var(--accent-bright) !important;
box-shadow: 0 0 0 3px var(--accent-wash) !important;
}
.qa-composer-row .qa-send-btn {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 !important;
border-radius: var(--radius-control) !important;
font-size: 0 !important;
}
.qa-composer-row .qa-send-btn::before {
display: block;
width: 20px;
height: 20px;
margin: auto;
background: currentColor;
content: "";
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 640px) {
.qa-composer-row {
grid-template-columns: minmax(0, 1fr) 52px !important;
}
.qa-composer-row .qa-send-btn {
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
height: 52px !important;
min-height: 52px !important;
}
.qa-composer-row .qa-input textarea {
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
line-height: 52px !important;
}
}
html body .gradio-container .hero-copy h1 {
font-size: var(--type-display) !important;
font-weight: 600 !important;
letter-spacing: -0.035em !important;
line-height: 1.04 !important;
}
html body .gradio-container .hero-copy p {
max-width: 68ch;
font-size: var(--type-body-large) !important;
line-height: 1.68 !important;
}
html body .gradio-container :where(.qa-eyebrow, .summary-eyebrow, .quiz-eyebrow, .flashcard-eyebrow, .workflow-label) {
font-weight: 600 !important;
letter-spacing: 0.06em !important;
}
html body .gradio-container :where(.qa-heading h2, .summary-heading h2, .quiz-heading h2, .flashcard-heading h2) {
font-weight: 600 !important;
letter-spacing: -0.02em !important;
}
html body .gradio-container .qa-chat .message .prose :where(h1, h2, h3),
html body .gradio-container .result-markdown :where(h1, h2, h3),
html body .gradio-container .feature-output .prose :where(h1, h2, h3) {
font-weight: 600 !important;
letter-spacing: -0.018em !important;
line-height: 1.3 !important;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap");
:root,
:root.dark,
.dark,
.gradio-container {
color-scheme: dark;
--font-sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Berkeley Mono", "SFMono-Regular", Menlo, monospace;
--type-caption: 0.75rem;
--type-label: 0.875rem;
--type-body: 1rem;
--type-body-large: 1.0625rem;
--type-heading: 1.5rem;
--type-display: clamp(2.5rem, 5.6vw, 4.5rem);
--leading-tight: 1.1;
--leading-body: 1.65;
--leading-reading: 1.72;
--surface-canvas: #08090a;
--surface-deep: #050506;
--surface-panel: #0f1012;
--surface-elevated: #17181b;
--surface-hover: #202126;
--surface-glass: rgba(15, 16, 18, 0.78);
--surface-input: rgba(255, 255, 255, 0.035);
--text-primary: #f7f8f8;
--text-secondary: #c6c9d0;
--text-tertiary: #8a8f98;
--text-disabled: #7c818a;
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.16);
--grid-line: rgba(255, 255, 255, 0.025);
--accent-primary: #5e6ad2;
--accent-bright: #7170ff;
--accent-hover: #828fff;
--accent-info: #76a7ff;
--accent-study: #a494ff;
--action-primary: #4f5bc0;
--action-hover: #5a65ca;
--accent-wash: rgba(113, 112, 255, 0.12);
--accent-glow: rgba(94, 106, 210, 0.2);
--status-success: #36b37e;
--status-warning: #d5a83f;
--status-error: #e0626c;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--radius-control: 7px;
--radius-card: 12px;
--radius-panel: 16px;
--radius-round: 999px;
--content-max: 1280px;
--background-fill-primary: var(--surface-canvas);
--background-fill-secondary: var(--surface-panel);
--body-background-fill: var(--surface-canvas);
--body-text-color: var(--text-primary);
--block-background-fill: transparent;
--block-border-color: transparent;
--block-border-width: 0;
--input-background-fill: var(--surface-elevated);
--input-border-color: var(--border-default);
--input-placeholder-color: var(--text-disabled);
--button-secondary-background-fill: var(--surface-elevated);
--button-secondary-text-color: var(--text-secondary);
--button-secondary-border-color: var(--border-default);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--surface-canvas);
}
html,
body {
min-height: 100%;
margin: 0;
font-family: var(--font-sans) ;
font-feature-settings: "cv01" 1, "ss03" 1;