*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--panel: #16213e;--accent: #e94560;--accent-hover: #ff6b81;--text: #eee;--text-muted: #aaa;--border: rgba(255,255,255,.1);--input-bg: #0f3460}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#root{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}header{background:var(--panel);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;gap:1rem}header h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}header .subtitle{color:var(--text-muted);font-size:.85rem}.main-content{display:flex;flex:1;overflow:hidden}.preview-area{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(180deg,#87ceeb,#b0e0e6 60%,#90ee90 60%,#228b22);position:relative;overflow:hidden}.preview-area.night{background:linear-gradient(180deg,#0c1445,#1a1a3e 60%,#1a3a1a 60%,#0d2b0d)}.sun-moon{position:absolute;top:2rem;right:3rem;width:60px;height:60px;border-radius:50%;transition:all .5s}.sun-moon.day{background:gold;box-shadow:0 0 40px 10px #ffd7004d}.sun-moon.night{background:silver;box-shadow:0 0 20px 5px #c0c0c033}.cloud{position:absolute;background:#fff;border-radius:50px;opacity:.8}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-1{width:80px;height:30px;top:3rem;left:10%;animation:drift 20s linear infinite}.cloud-1:before{width:40px;height:40px;top:-20px;left:10px}.cloud-1:after{width:30px;height:30px;top:-10px;left:40px}.cloud-2{width:100px;height:35px;top:5rem;left:60%;animation:drift 25s linear infinite reverse}.cloud-2:before{width:50px;height:50px;top:-25px;left:15px}.cloud-2:after{width:35px;height:35px;top:-15px;left:55px}@keyframes drift{0%{transform:translate(-200px)}to{transform:translate(calc(100vw + 200px))}}.house-container{position:relative;z-index:1;margin-top:4rem}.controls{width:320px;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.control-section{background:#ffffff08;border:1px solid var(--border);border-radius:.5rem;padding:1rem}.control-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.75rem}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.control-row:last-child{margin-bottom:0}.control-row label{font-size:.85rem;color:var(--text-muted)}.control-row select,.control-row input[type=color]{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:.3rem .5rem;border-radius:.3rem;font-size:.8rem}.control-row input[type=color]{width:40px;height:30px;padding:2px;cursor:pointer}.control-row input[type=range]{width:100px;accent-color:var(--accent)}.toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.toggle-row label{font-size:.85rem;color:var(--text-muted);cursor:pointer}.toggle{position:relative;width:36px;height:20px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle .slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#333;border-radius:20px;transition:.2s}.toggle .slider:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}.toggle input:checked+.slider{background:var(--accent)}.toggle input:checked+.slider:before{transform:translate(16px)}.btn-export{background:var(--accent);color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s;width:100%}.btn-export:hover{background:var(--accent-hover)}.tree{position:absolute;bottom:0}.tree-trunk{width:12px;height:40px;background:#5d4037;margin:0 auto;border-radius:2px}.tree-canopy{width:50px;height:50px;background:#2e7d32;border-radius:50%;margin:0 auto -10px;position:relative}.tree-canopy.small{width:35px;height:35px}.bush{position:absolute;bottom:0;width:35px;height:25px;background:#388e3c;border-radius:50% 50% 10% 10%}.flower{position:absolute;bottom:0;width:8px;height:8px;border-radius:50%}.path{position:absolute;bottom:0;background:#9e9e9e;border-radius:3px 3px 0 0}@media(max-width:768px){.main-content{flex-direction:column-reverse}.controls{width:100%;max-height:40vh;border-left:none;border-top:1px solid var(--border)}.preview-area{min-height:50vh}}