style.css

:root{color-scheme:light}
body{background:#fff!important}
.gradio-container{width:100%!important;max-width:1200px!important;margin:auto!important;padding:clamp(16px,3vw,36px)!important;background:#fff!important;color:#242424!important;font-family:Inter,system-ui,sans-serif!important}
.gradio-container>.main{padding:0!important}
footer{display:none!important}
#masthead{margin-bottom:16px!important}
.masthead{padding-bottom:20px;border-bottom:1px solid #e8e8e8}
.masthead h1{margin:0;font-size:28px;line-height:1.3;font-weight:650;letter-spacing:-.8px;color:#202020}
.masthead p{margin:7px 0 0;font-size:13px;color:#777;line-height:1.6}
#workspace{gap:28px!important;align-items:flex-start!important}
#input-panel,#result-panel{min-width:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;gap:12px!important}
#input-panel{flex:0 0 310px!important}#result-panel{flex:1!important}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.section-heading h2{font-size:14px;font-weight:600;color:#333;margin:0}
.section-heading span{font-size:11px;color:#888;font-weight:400}
#input-tabs{border:0!important}
#input-tabs .tabitem{padding:10px 0 0!important;border:0!important;background:transparent!important}
#input-tabs [role=tab]{font-size:13px!important}
#input-tabs [role=tab][aria-selected=true]{color:#222!important;border-color:#222!important}
#image-upload{border:1px dashed #ccc!important;border-radius:6px!important;background:#fafafa!important}
#video-upload,#input-gallery{border:1px solid #e6e6e6!important;border-radius:6px!important;background:#fafafa!important}
#upload-hint p,#default-hint p,#input-view-count p,#viewer-help p,#result-status p{font-size:11px!important;line-height:1.6!important;color:#777!important;margin:0!important}
#input-view-count strong{color:#333!important;font-weight:500}
#settings{background:#fff!important;border:1px solid #e6e6e6!important;border-radius:6px!important}
#settings>button{font-size:12px!important}
#generate{background:#252525!important;color:white!important;border:0!important;border-radius:6px!important;min-height:42px!important;font-size:13px!important;font-weight:550!important;box-shadow:none!important}
#generate:hover{background:#444!important}
#generate:focus-visible{outline:2px solid #888;outline-offset:3px}
#scene-viewer{padding:0!important;border:0!important;border-radius:6px!important;overflow:hidden;background:#f5f5f5!important;min-height:520px!important}
#scene-viewer iframe{display:block;width:100%;height:520px!important;border:0!important;background:#666}
.empty-scene{height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f5f5;color:#888;text-align:center;padding:20px;box-sizing:border-box}
.empty-scene span{font-size:14px;color:#666}.empty-scene p{font-size:12px;margin:8px 0 0;color:#999}
#viewer-help p{text-align:center}
#downloads{gap:10px!important;flex-wrap:nowrap!important}
#downloads .block{min-width:0!important;flex:1!important;border-radius:6px!important;border-color:#e6e6e6!important}
#downloads .empty{height:48px!important;min-height:48px!important}
#downloads button,#downloads a{min-height:42px!important;border:1px solid #d6d6d6!important;border-radius:6px!important;background:#fafafa!important;font-size:13px!important}
#downloads button:disabled{opacity:.5!important;cursor:not-allowed!important}
#download-hint p{font-size:11px!important;line-height:1.6!important;color:#777!important;margin:0!important}
#result-status a{color:#444!important;text-decoration:underline}
#examples-section{border-top:1px solid #e8e8e8!important;padding-top:20px!important;margin-top:12px!important;gap:12px!important}
#example-gallery{border:0!important;background:transparent!important;box-shadow:none!important}
#example-gallery,#example-gallery .grid-wrap{height:auto!important;overflow:visible!important}
#example-gallery .grid-container{grid-auto-rows:174px!important;grid-template-rows:none!important}
#example-gallery .gallery-item,#example-gallery .thumbnail-item{height:174px!important;min-height:0!important;width:100%!important}
#example-gallery .thumbnail-item{border:1px solid #e6e6e6!important;border-radius:5px!important;overflow:hidden;box-shadow:none!important}
#example-gallery .thumbnail-item:hover,#example-gallery .thumbnail-item.selected{border-color:#555!important}
#example-gallery .caption-label{font-size:11px!important;background:#fffffff2!important;color:#444!important;padding:7px!important;white-space:normal!important;line-height:1.4!important;max-height:none!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;box-sizing:border-box!important}
@media(max-width:800px){#workspace{flex-direction:column!important;gap:24px!important}#input-panel,#result-panel{flex:auto!important;width:100%!important}#scene-viewer,#scene-viewer iframe,.empty-scene{height:360px!important;min-height:360px!important}#example-gallery .grid-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}}