Spaces:
Sleeping
Sleeping
| :root { color-scheme: light; --paper:#f3f2ec; --surface:#fbfaf6; --ink:#222b25; --muted:#778078; --line:#d8d9d0; --green:#315b48; --lime:#9ace82; --coral:#db7358; --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --display:'Space Grotesk',sans-serif; } | |
| * { box-sizing:border-box; } | |
| html { min-width:320px; background:var(--paper); } | |
| body { margin:0; color:var(--ink); font-family:var(--sans); background:var(--paper); } | |
| button,input { font:inherit; } | |
| button { color:inherit; } | |
| .app-shell { max-width:1440px; min-height:100vh; margin:auto; padding:0 6%; background-image:radial-gradient(#59644d12 .7px,transparent .7px); background-size:8px 8px; } | |
| .topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } | |
| .brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font:700 16px var(--display); } | |
| .brand-light { color:var(--muted); font-weight:500; } | |
| .brand-mark { width:24px; height:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; transform:rotate(-9deg); } | |
| .brand-mark i { border-radius:2px; background:var(--green); }.brand-mark i:nth-child(2){background:#91b680}.brand-mark i:nth-child(3){background:var(--coral)}.brand-mark i:nth-child(4){background:#d8a26d} | |
| .topbar-right { display:flex; align-items:center; gap:11px; color:#68736b; font:10px var(--mono); } | |
| .live-dot { width:7px; height:7px; border-radius:50%; background:#82ad6b; box-shadow:0 0 0 3px #82ad6b22; }.topbar-rule{height:13px;border-left:1px solid #c4c7bd;margin:0 4px} | |
| main { display:grid; gap:22px; padding:34px 0 42px; } | |
| .lab-panel { padding:24px 26px; border:1px solid var(--line); background:var(--surface); box-shadow:0 12px 34px #48523c0a; } | |
| .control-panel { display:block; } | |
| .control-panel h1 { margin-bottom:18px; font-size:20px; } | |
| .panel-heading { display:flex; align-items:center; gap:13px; min-width:0; } | |
| .section-index { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid #d2d8cc; border-radius:50%; color:var(--green); font:11px var(--mono); } | |
| .eyebrow { margin:0 0 4px; color:var(--muted); font:9px var(--mono); letter-spacing:.04em; } | |
| h1,h2 { margin:0; font:600 20px var(--display); } h1{font-size:18px} | |
| .config-rows { max-width:820px; display:grid; gap:8px; } | |
| .config-row { display:grid; grid-template-columns:110px minmax(0,1fr) 70px; align-items:center; min-height:40px; } | |
| .config-row label,.row-label-button { align-self:stretch; display:flex; align-items:center; padding:0 12px; border:1px solid #cfd3c9; border-right:0; border-radius:3px 0 0 3px; color:var(--green); background:#f0f2eb; font:10px var(--mono); } | |
| .config-row input, .config-row select { min-width:0; width:100%; height:40px; padding:0 12px; color:var(--ink); border:1px solid #cfd3c9; border-radius:0 3px 3px 0; outline:none; background:white; font:11px var(--mono); } | |
| .config-row input:focus, .config-row select:focus { position:relative; border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); } | |
| .config-row input[readonly] { color:#687169; background:#f8f7f2; } | |
| .config-row #model-input,.config-row #seed-input { grid-column:2 / 4; } | |
| .config-row:has(#apply-timesteps) input { border-radius:0; } | |
| .config-row #apply-timesteps,.process-button { border:1px solid var(--green); color:white; background:var(--green); cursor:pointer; font:10px var(--mono); } | |
| .config-row #apply-timesteps { align-self:stretch; border-radius:0 3px 3px 0; } | |
| .config-row #apply-timesteps:hover,.process-button:hover:not(:disabled){background:#244737} | |
| .row-label-button { cursor:pointer; text-align:left; } | |
| .row-label-button:hover { color:white; background:var(--green); } | |
| .config-help { display:flex; justify-content:space-between; gap:20px; padding-left:110px; color:var(--muted); font:8px/1.5 var(--mono); } | |
| .field-error { min-height:12px; margin:0; padding-left:110px; color:#b34e38; font:8px/1.5 var(--mono); } | |
| .equation-note { display:grid; gap:9px; padding:5px 0 5px 18px; border-left:2px solid var(--coral); } | |
| .equation-label { color:var(--muted); font:9px var(--mono); }.equation{color:var(--green);font:500 15px var(--display);white-space:nowrap}.equation sub{font-size:9px} | |
| .process-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:18px; } | |
| .process-heading>p { max-width:330px; margin:0; color:var(--muted); text-align:right; font:10px/1.5 var(--mono); } | |
| .process-heading .reverse-equation { max-width:520px; color:var(--green); font:500 13px/1.6 var(--display); } | |
| .reverse-equation sub { font-size:8px; } | |
| .step-progress { flex:0 0 auto; padding:6px 10px; border:1px solid #d6dacf; border-radius:3px; color:var(--coral); background:#f5f4ef; font:500 11px var(--mono); white-space:nowrap; } | |
| .image-track { display:grid; grid-template-columns:repeat(var(--stage-count,8),minmax(100px,1fr)); gap:10px; overflow-x:auto; padding:2px 2px 10px; } | |
| .stage-card { position:relative; min-width:100px; transition:opacity .2s,transform .2s; } | |
| .stage-card.is-pending .stage-canvas canvas { opacity:0; } | |
| .stage-card.is-pending .stage-canvas::after { content:'WAITING'; position:absolute; inset:0; display:grid; place-items:center; color:#92998f; font:8px var(--mono); } | |
| .action-slot { position:relative; z-index:2; height:34px; display:flex; align-items:flex-start; gap:5px; } | |
| .action-slot.reverse-actions { width:max-content; left:100%; transform:translateX(-100%); } | |
| .action-slot.status-right { width:max-content; left:100%; transform:translateX(-100%); } | |
| .process-button { min-width:76px; height:28px; padding:0 12px; border-radius:3px; } | |
| .reverse-actions .process-button { min-width:auto; padding:0 8px; font-size:8px; white-space:nowrap; } | |
| .process-button:disabled { opacity:.6; cursor:progress; } | |
| .stage-canvas { position:relative; overflow:hidden; aspect-ratio:1; border:1px solid #dedfd7; background:linear-gradient(135deg,#e7e5dc,#d9ddd4); transition:border-color .2s,box-shadow .2s; } | |
| .stage-canvas canvas { display:block; width:100%; height:100%; object-fit:cover; } | |
| .stage-card.is-active { transform:translateY(-3px); }.stage-card.is-active .stage-canvas{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral),0 8px 20px #db735824} | |
| .change-image { position:absolute; right:6px; bottom:6px; min-height:25px; padding:0 7px; border:1px solid #ffffffb8; border-radius:3px; background:#fbfaf6e8; cursor:pointer; font:8px var(--mono); } | |
| .noise-actions { position:absolute; right:6px; bottom:6px; z-index:2; display:flex; gap:4px; } | |
| .noise-actions .process-button { min-width:auto; height:25px; padding:0 7px; border-color:#ffffffb8; color:var(--ink); background:#fbfaf6e8; font-size:7px; } | |
| .noise-actions .process-button:hover:not(:disabled) { color:white; background:var(--green); } | |
| .stage-caption { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:25px; padding-top:7px; }.stage-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10px var(--display)}.stage-caption span{flex:0 0 auto;margin-left:auto;color:var(--green);font:600 13px var(--mono)}.stage-caption span:only-child{margin-right:auto} | |
| .hover-preview { position:fixed; z-index:50; display:none; width:256px; height:256px; padding:0; border:2px solid var(--surface); background:#e7e5dc; box-shadow:0 12px 38px #25312852; pointer-events:none; } | |
| .hover-preview canvas { display:block; width:256px; height:256px; } | |
| .hover-preview.is-visible { display:block; } | |
| .model-status { margin:8px 0 0; padding-top:10px; border-top:1px solid #e1e2da; color:#737d74; font:9px/1.5 var(--mono); } | |
| .model-note { padding:4px 7px; color:#818981; font:9px/1.6 var(--mono); }.model-note span{display:block;margin-bottom:3px;color:var(--green)} | |
| footer { min-height:52px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:#7e877f; font:8px var(--mono); }.footer-dot{color:var(--coral);padding:0 4px} | |
| @media(max-width:900px){.image-track{grid-template-columns:repeat(var(--stage-count,8),minmax(112px,1fr))}} | |
| @media(max-width:620px){.app-shell{padding:0 4%}.topbar{height:64px}.topbar-right{font-size:7px;gap:6px}.lab-panel{padding:18px 14px}.config-row{grid-template-columns:82px minmax(0,1fr) 58px}.config-help{padding-left:82px;flex-direction:column;gap:2px}.field-error{padding-left:82px}.process-heading{align-items:flex-start;flex-direction:column;gap:10px}.process-heading>p{text-align:left}.image-track{grid-template-columns:repeat(var(--stage-count,8),124px)}footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:5px}} | |