@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&family=Press+Start+2P&display=swap'); :root { --sky: #8fd3ef; --sky-soft: #d9f0fa; --grass: #74c043; --grass-mid: #5aa531; --grass-dark: #3f7c20; --grass-edge: #2f5e16; --brick: #d06a44; --brick-mid: #b4502d; --brick-dark: #8a3a1f; --dirt: #7a5230; --dirt-dark: #5a3a20; --hud: #141b27; --hud-2: #1d2736; --ink: #18222e; --ink-soft: #4a5a6a; --paper: #ffffff; --paper-2: #f3f8fc; --cyan: #4cc4e6; } body { font-family: 'Nunito', system-ui, sans-serif !important; color: var(--ink) !important; background: radial-gradient(120% 80% at 50% -10%, #a7e0f4 0%, transparent 55%), linear-gradient(180deg, #bfe9f8 0%, #d9f1fb 38%, #e6f6ec 72%, #e0f0d6 100%) !important; min-height: 100vh; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(60,110,150,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(60,110,150,.05) 1px, transparent 1px); background-size: 32px 32px; } /* Gradio's host paints --body-background-fill (white in light, near-black in dark) over our body gradient — keep it transparent so the sky→grass gradient shows through. */ gradio-app { background: transparent !important; } /* Gradio's .styler / .form wrappers carry their own surface fill that sits on top of our .gs-card — keep them transparent so the card shows through. */ .gs-card .styler, .gs-card .form { background: transparent !important; border: none !important; } /* ===================== DARK THEME (nighttime world) ===================== Gradio adds `body.dark` based on the visitor's system preference. Map it to the design's nighttime voxel palette (mirrors the design's [data-theme="dark"]). Most rules below just redefine the palette vars; the explicit overrides cover spots in this file that hard-code light hex, plus Gradio's own theme vars. */ body.dark { --grass: #6fb841; --grass-mid: #4f9a2c; --grass-dark: #356615; --brick: #c25f3c; --brick-dark: #7e3219; --ink: #e8eef5; --ink-soft: #9fb0c2; --paper: #1a2230; --paper-2: #131a26; --cyan: #5fd3f2; /* Gradio component variables → dark surfaces matching the palette */ --body-text-color: #e8eef5; --body-text-color-subdued: #9fb0c2; --background-fill-primary: #1a2230; --background-fill-secondary: #131a26; --block-background-fill: #1a2230; --block-label-background-fill: #1a2230; --input-background-fill: #0f1623; --input-background-fill-focus: #101a26; --border-color-primary: #33415a; --block-border-color: #33415a; } body.dark { background: radial-gradient(120% 80% at 50% -10%, #1e3346 0%, transparent 55%), linear-gradient(180deg, #0c131e 0%, #0f1826 40%, #101d22 74%, #14201a 100%) !important; } body.dark::before { background-image: linear-gradient(rgba(120,170,210,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,210,.05) 1px, transparent 1px); } /* NB: for descendant rules use the bare `.dark` ancestor (Gradio's dark-mode class on ), NOT `body.dark X`. Gradio's CSS scoper rewrites the latter to `.dark .gradio-container ... .contain body X`, placing `body` as a descendant of `.contain`, which never matches. `.dark X` scopes correctly. */ /* Cards: the base rule borders with var(--ink), which is light text in dark mode — pin the border/shadow to the design's near-black instead. */ .dark .gs-card { border-color: #0a0f17 !important; box-shadow: 0 8px 0 #0a0f17, 0 22px 40px -22px rgba(0,0,0,.7) !important; } .dark .gs-card-head { border-bottom-color: #0a0f17; } .dark .gs-card-head.sky { background: #1c2c3a; } .dark .gs-card-head.brick { background: #33231c; } .dark .gs-card-head.hud { background: #222d3d; } /* Inputs (textbox + dropdown). NB: give each `.dark` selector its own rule — do NOT comma-group them. Gradio's scoper inserts a stray second `.dark` into the 2nd+ members of a comma group (e.g. `.contain .dark .gs-card ...`), so only the first member ever matches. */ .dark .gs-card input { background: #0f1623 !important; border-color: #33415a !important; color: var(--ink) !important; } .dark .gs-card textarea { background: #0f1623 !important; border-color: #33415a !important; color: var(--ink) !important; } .dark .gs-card .svelte-1xfsv4t input[role="listbox"] { background: #0f1623 !important; border-color: #33415a !important; color: var(--ink) !important; } .dark .gs-card input::placeholder { color: #6b7d92 !important; } .dark .gs-card input:focus { border-color: var(--grass-mid) !important; background: #101a26 !important; box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important; } .dark .gs-card textarea:focus { border-color: var(--grass-mid) !important; background: #101a26 !important; box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important; } .dark .gs-card .svelte-1xfsv4t input[role="listbox"]:focus { border-color: var(--grass-mid) !important; background: #101a26 !important; box-shadow: 0 0 0 4px rgba(111,184,65,.25) !important; } /* Voxel tiles: deepen the inner bevel for the night palette */ .dark .gs-tile { box-shadow: inset -4px -4px 0 rgba(0,0,0,.3), inset 4px 4px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.4); } /* "Check status" (hud) button */ .dark #gs-btn-status { background: #2a3a52 !important; border-color: #0a0f17 !important; box-shadow: 0 6px 0 #0a0f17 !important; } .dark #gs-btn-status:active { box-shadow: 0 0 0 #0a0f17 !important; } /* Dim the ground + footer at night */ .dark .gs-ground { box-shadow: inset 0 5px 0 rgba(255,255,255,.08); filter: brightness(.82); } .dark .gs-footer { filter: brightness(.82); } .gradio-container { max-width: 1180px !important; margin: 0 auto !important; padding: 40px 26px 0 !important; background: transparent !important; box-shadow: none !important; } /* Hide Gradio's default footer. The svelte hash changes between versions, so target the semantic