styles.css

/* Palette and quarter-circle motif from MLinPL Tutorial.pdf. */
body { background: var(--body-background-fill); }
.gradio-container { width: 100% !important; min-width: 0 !important; box-sizing: border-box; max-width: 1200px !important; margin: auto !important; padding: 32px 24px !important; }
.gradio-container .main { width: 100%; min-width: 0; padding: 0 !important; }
.gradio-container .main > .wrap, .gradio-container main { min-width: 0; width: 100%; }
#workshop { width: 100%; gap: 22px; min-width: 0 !important; }
#hero { padding: 0; border: 0; background: transparent; }
.workshop-hero { position: relative; overflow: hidden; isolation: isolate; padding: 46px 90px; border-radius: 24px; background: #2b2661; color: white; text-align: center; }
.workshop-hero .eyebrow { margin: 0 0 20px; color: #70dfd5; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.workshop-hero h1 { max-width: 820px; margin: auto; color: white; font-size: clamp(27px, 3.3vw, 43px); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.workshop-hero h1 span { display: block; margin-top: 10px; color: #ded3ef; font-size: .65em; font-weight: 400; letter-spacing: -.015em; }
.workshop-hero .hero-note { margin: 24px 0 0; color: #c9c5e2; font-size: 14px; }
.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-shapes i { position: absolute; width: 80px; height: 80px; }
.hero-shapes i:nth-child(1) { top: 0; right: 0; border-radius: 0 0 100% 0; background: #8a389e; }
.hero-shapes i:nth-child(2) { top: 80px; right: 80px; border-radius: 0 0 100% 0; background: #17bcaf; }
.hero-shapes i:nth-child(3) { bottom: 0; left: 0; border-radius: 0 100% 0 0; background: #59358c; }
#submit-panel, #results-panel { padding: 26px; border: 1px solid var(--block-border-color); border-radius: 20px; background: var(--block-background-fill); box-shadow: 0 8px 28px #2b266108; min-width: 0; }
#intro, #status { text-align: center; }
#intro h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.025em; }
#intro p { margin: 8px auto; max-width: 760px; color: var(--body-text-color-subdued); line-height: 1.7; }
#intro code { font-size: 12px; overflow-wrap: anywhere; }
#upload-fields { gap: 18px; margin-top: 12px; align-items: center; }
#login-field, #upload-field { border-radius: 14px; }
#login-field textarea { text-align: center; min-height: 50px; }
#upload-field { border-style: dashed; border-color: #17bcaf80; }
#upload-field .upload-container { min-height: 0 !important; padding: 24px !important; }
#upload-field:hover { border-color: #17bcaf; }
#submit-actions, #refresh-actions { justify-content: center; }
#submit-button, #refresh-button { min-height: 46px; border-radius: 12px; font-weight: 600; }
#submit-button { box-shadow: 0 4px 14px #17bcaf25; }
#submit-button:hover { box-shadow: 0 6px 18px #17bcaf40; }
#workshop button:focus-visible, #workshop textarea:focus-visible { outline: 3px solid #17bcaf; outline-offset: 3px; }
#status:empty { display: none; }
#status p { overflow-wrap: anywhere; }
#scoring-accordion { border-radius: 14px; }
#scoring { text-align: center; }
#scoring table { text-align: left; font-size: 13px; }
#scoring code { white-space: normal; overflow-wrap: anywhere; }
#results-tabs [role="tablist"] { justify-content: center; gap: 8px; border-bottom: 1px solid var(--block-border-color); padding-bottom: 12px; }
#results-tabs [role="tablist"] button { min-height: 44px; border: 0; border-radius: 10px; padding: 10px 24px; color: var(--body-text-color-subdued); font-weight: 600; }
#results-tabs [role="tablist"] button.selected { background: #8a389e; color: white; }
#results-tabs [role="tablist"] button:hover:not(.selected) { background: #8a389e12; }
#results-tabs { min-width: 0; width: 100%; }
#results-panel .column { min-width: 0 !important; }
#results-panel .tabitem { padding: 20px 0 0; border: 0; min-width: 0; }
#results-panel .block { min-width: 0 !important; }
#leaderboard-table, #submissions-table { max-width: 100%; border-radius: 12px; }
#results-panel th, #results-panel td { text-align: center !important; font-variant-numeric: tabular-nums; }
#results-panel th { font-weight: 600; }
#results-panel td { font-size: 13px; }
#results-panel .cell-wrap { text-align: center; font-variant-numeric: tabular-nums; }
#results-note { text-align: center; color: var(--body-text-color-subdued); font-size: 12px; }
#refresh-actions { margin-top: 8px; }
@media (max-width: 640px) {
    .gradio-container { padding: 14px 12px !important; }
#workshop { width: 100%; gap: 14px; }
    .workshop-hero { padding: 36px 24px; border-radius: 18px; }
    .workshop-hero .eyebrow { font-size: 10px; letter-spacing: .12em; }
    .workshop-hero .hero-note { font-size: 12px; }
    .hero-shapes i { width: 40px; height: 40px; }
    .hero-shapes i:nth-child(2) { top: 40px; right: 40px; }
    #submit-panel, #results-panel { padding: 18px 14px; border-radius: 16px; }
    #intro h2 { font-size: 20px; }
    #intro p { font-size: 14px; }
    #upload-fields { flex-direction: column; gap: 12px; }
    #upload-fields > * { width: 100%; min-width: 0 !important; }
    #submit-button, #refresh-button { width: 100%; flex-grow: 1; }
    #results-tabs [role="tablist"] { gap: 4px; }
    #results-tabs [role="tablist"] button { min-height: 44px; padding: 10px 18px; font-size: 14px; }
    #scoring { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    #workshop * { scroll-behavior: auto !important; transition: none !important; }
}