:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9ece4;background:#141716;font-synthesis:none;color-scheme:dark;--muted:#8a958e;--line:#343b35;--accent:#d0ec97}*{box-sizing:border-box}body{margin:0}button,input,select,a{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;padding:0 5%}.brand{text-decoration:none;color:#eff4e7;font-size:20px;letter-spacing:2px;font-weight:800;display:flex;align-items:center;gap:8px}.brand-icon{font-size:36px;color:var(--accent);margin-right:7px}.brand-light{font-weight:300;color:#a8b39d}.header-note{color:var(--muted);font-size:12px}.engine{margin-left:auto;font-size:10px;letter-spacing:1.6px;color:#afbaad;display:flex;gap:10px;align-items:center}.engine i,.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent)}main{max-width:1510px;margin:auto;padding:42px 5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent);font-weight:600}h1{font-weight:450;letter-spacing:-1.7px;font-size:40px;margin:11px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro p{color:var(--muted);font-size:13px;margin:0}.quiet,.small{border:1px solid #444d40;background:transparent;color:#dce4d4;border-radius:6px;padding:10px 13px;text-decoration:none;font-size:12px;white-space:nowrap}.quiet:hover,.small:hover{background:#2d352a}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px}.panel{background:#1c211e;border:1px solid var(--line);border-radius:10px;overflow:hidden}.section-title{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:20px}h2{font-size:13px;font-weight:550;margin:0}.objects{padding:20px;align-self:start}.count{color:#92a184;font-size:11px;margin-left:5px}.small{padding:7px 9px;font-size:10px}.object-list{display:grid;gap:7px;margin-bottom:24px}.object{display:flex;align-items:center;text-align:left;gap:11px;width:100%;padding:11px;background:#222823;border:1px solid transparent;border-radius:6px;color:#e4eadf}.object.active{border-color:#869e68;background:#303a2a}.orb{width:25px;height:25px;flex:none;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffffaa,transparent 60%),var(--orb);box-shadow:inset -5px -5px 10px #0005}.object .object-name{font-size:12px;display:block}.object .object-material{font-size:10px;color:#a4b09c;margin-top:3px;display:block;text-transform:capitalize}.object .index{margin-left:auto;color:#809174;font-size:10px}.inspector-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-bottom:18px}.delete{border:0;color:#b6bcae;background:none;font-size:11px;padding:5px}.delete:hover{color:#fba291}label{display:block;color:#a4b09f;font-size:11px}input[type=number],select{width:100%;min-width:0;background:#141916;color:#e0e7d9;border:1px solid #3a4438;border-radius:5px;padding:9px;font-size:12px}select{margin-top:8px}input[type=color]{border:1px solid #56604e;border-radius:5px;padding:3px;background:#171d17;width:40px;height:30px;cursor:pointer}input[type=range]{width:100%;margin:14px 0 0;accent-color:var(--accent);height:4px}.xyz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.xyz label{position:relative}.xyz .axis-field{position:relative}.xyz .axis-letter{position:absolute;left:8px;top:10px;font-size:10px;color:#738269}.xyz input{padding-left:21px;padding-right:3px}.field{margin-bottom:18px}.field>label{margin-bottom:8px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.field-pair select{margin-top:0}.field-pair label{margin-bottom:8px}.range-label{display:flex;justify-content:space-between}output{color:#dce7d1}.ground{border-top:1px solid var(--line);padding-top:20px;margin-top:24px;display:flex;align-items:center;gap:12px}.ground label{color:#d6dfce}.ground label span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.stage-area{min-width:0}.preview-toolbar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:10px;letter-spacing:1.5px;color:#9ba991}.tiny-dot{width:5px;height:5px;margin-right:8px}.canvas-wrap{background:#101410;position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}canvas{width:100%;height:100%;object-fit:contain;display:block;visibility:hidden}.canvas-wrap.has-image canvas{visibility:visible}.viewport-label{position:absolute;bottom:14px;left:18px;font-size:9px;letter-spacing:1.4px;color:#fff9;text-shadow:0 1px 3px #000}#empty{position:absolute;color:#88937f;font-size:13px}.render-status{padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}#status{display:block;font-size:12px}#details{display:block;font-size:10px;margin-top:5px;color:var(--muted)}.disabled{opacity:.35;pointer-events:none}.progress-track{height:3px;background:#252d23}#progress{height:100%;width:0;background:var(--accent);transition:width .2s}.settings-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:18px}.settings{padding:20px}.muted{font-size:10px;color:var(--muted)}.vector-row{display:grid;grid-template-columns:54px 1fr;gap:7px;align-items:center;margin-bottom:12px}.vector-row>span{font-size:11px;color:#a4b09f}.settings .range-label{margin-top:18px}.tag{font-size:8px;letter-spacing:1px;color:#b0c897;background:#303b28;padding:5px 6px;border-radius:4px}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.limit-note{font-size:10px;line-height:1.7;color:#8b9981;margin:16px 0}.render-actions{display:flex;gap:8px}.primary{display:flex;justify-content:space-between;align-items:center;flex:1;border:0;border-radius:5px;padding:12px 15px;background:var(--accent);color:#26311d;font-size:12px;font-weight:600}.primary:hover{background:#e0f5b5}.primary span{font-size:17px}footer{display:flex;justify-content:space-between;color:#718068;font-size:10px;padding:24px 0}.footer-star{color:var(--accent);font-size:18px;margin-left:20px}[hidden]{display:none!important}.error{color:#ffb9a1!important}@media(min-width:1450px){.workspace{grid-template-columns:310px 1fr}}@media(max-width:1000px){main{padding:30px 3% 0}header{padding:0 3%}.workspace{grid-template-columns:260px minmax(0,1fr);gap:14px}.settings-grid{grid-template-columns:1fr}.header-note{display:none}}@media(max-width:680px){header{height:65px}.engine{font-size:8px;letter-spacing:.5px}.brand{font-size:15px;gap:4px}.brand-icon{font-size:28px}.intro{align-items:flex-start;gap:10px}h1{font-size:29px}.intro p{font-size:11px;line-height:1.6}.intro .quiet{font-size:10px;padding:8px}.workspace{display:flex;flex-direction:column}.objects{width:100%;order:2}.stage-area{order:1}.settings-grid{grid-template-columns:1fr}.render-status{padding:14px 12px}.render-status .quiet{font-size:10px}.object-list{grid-template-columns:1fr 1fr}footer{font-size:9px}main{padding-top:24px}}

.settings .range-label[for="fov"] { margin-top: 30px; }

.starting-scenes { margin-bottom: 24px; }
.starting-scenes .section-title { margin-bottom: 12px; }
.preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.preset { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #1c211e; color: #e9ece4; text-align: left; }
.preset:hover { background: #283027; border-color: #71835e; }
.preset[aria-pressed="true"] { border-color: var(--accent); background: #293223; }
.preset-colors { display: flex; margin-bottom: 12px; }
.preset-colors .orb { width: 29px; height: 29px; margin-right: -5px; }
.preset strong { display: block; font-size: 12px; font-weight: 550; }
.preset-description { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: #a4b09f; }
@media (max-width: 680px) {
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .starting-scenes .section-title { align-items: flex-start; flex-direction: column; gap: 7px; }
}

#placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.backend-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; line-height: 1.5; color: #b4beb3; }
.backend-status strong { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: #dce4d4; }
.backend-status[data-state="warming"], .backend-status[data-state="unavailable"] { background: #d9b86a0d; border-color: #d9b86a45; color: #d4c8ad; }
.backend-status[data-state="warming"] strong, .backend-status[data-state="unavailable"] strong { color: #ead39e; }
.backend-indicator { flex: none; width: 12px; height: 12px; margin-top: 3px; border: 2px solid #d9b86a45; border-top-color: #ead39e; border-radius: 50%; }
.backend-status[data-state="warming"] .backend-indicator { animation: backend-spin 1.4s linear infinite; }
.backend-status[data-state="ready"] .backend-indicator { width: 7px; height: 7px; margin: 6px 3px 0 2px; border: 0; background: var(--accent); }
.backend-status[data-state="unavailable"] .backend-indicator { border-color: #ead39e; }
@keyframes backend-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .backend-status[data-state="warming"] .backend-indicator { animation: none; } }