*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--panel-bg:#111827;--panel-border:#1f2937;--text:#e5e7eb;--text-muted:#9ca3af;--accent:#3b82f6;--accent-dark:#1d4ed8;--input-bg:#1f2937;--radius:8px;--shadow:0 4px 20px #00000080}html,body{height:100%;color:var(--text);background:#0d0d1a;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;display:flex}#settings-panel{background:var(--panel-bg);border-right:1px solid var(--panel-border);width:300px;min-width:280px;box-shadow:var(--shadow);z-index:10;flex-direction:column;gap:0;padding:20px 16px;display:flex;overflow-y:auto}#viewport{flex:1;position:relative;overflow:hidden}#three-canvas{display:block;width:100%!important;height:100%!important}h1{color:#fff;letter-spacing:-.02em;font-size:1.4rem;font-weight:700;line-height:1.2}.subtitle{color:var(--text-muted);margin-top:4px;margin-bottom:20px;font-size:.75rem}#settings-form{flex-direction:column;gap:16px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}label{color:var(--text);flex-direction:column;gap:2px;font-size:.82rem;font-weight:600;display:flex}.hint{color:var(--text-muted);font-size:.72rem;font-weight:400}.slider-row{align-items:center;gap:10px;display:flex}input[type=range]{appearance:none;background:var(--input-bg);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.slider-value{text-align:right;min-width:28px;color:var(--accent);font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600}.level-marks{justify-content:space-between;padding:0 2px;display:flex}.level-marks span{color:var(--text-muted);font-size:.68rem}.color-row{align-items:center;gap:10px;display:flex}input[type=color]{appearance:none;border:2px solid var(--panel-border);border-radius:var(--radius);cursor:pointer;background:0 0;width:36px;height:36px;padding:2px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-label{color:var(--text-muted);font-family:monospace;font-size:.78rem}.toggles{gap:8px}.toggle-label{cursor:pointer;color:var(--text);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:.82rem;font-weight:500;display:flex;flex-direction:row!important}.toggle-label input[type=checkbox]{display:none}.toggle-switch{background:var(--input-bg);border-radius:10px;flex-shrink:0;width:36px;height:20px;transition:background .2s;position:relative}.toggle-switch:after{content:"";background:var(--text-muted);border-radius:50%;width:14px;height:14px;transition:left .2s,background .2s;position:absolute;top:3px;left:3px}.toggle-label input:checked+.toggle-switch{background:var(--accent)}.toggle-label input:checked+.toggle-switch:after{background:#fff;left:19px}#generate-btn{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;letter-spacing:.03em;border:none;justify-content:center;align-items:center;gap:8px;margin-top:4px;padding:10px 16px;font-size:.88rem;font-weight:700;transition:background .2s,transform .1s;display:flex}#generate-btn:hover{background:var(--accent-dark)}#generate-btn:active{transform:scale(.97)}#stats-panel{background:var(--input-bg);border-radius:var(--radius);border:1px solid var(--panel-border);flex-direction:column;gap:0;margin-top:20px;padding:12px;display:flex}.stat{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:5px 0;display:flex}.stat:last-child{border-bottom:none}.stat-label{color:var(--text-muted);font-size:.76rem}.stat-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:700}.footer-hint{color:var(--text-muted);margin-top:auto;padding-top:16px;font-size:.72rem;line-height:1.6}#loading-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#loading-overlay.hidden{display:none}.loading-box{color:#fff;flex-direction:column;align-items:center;gap:16px;font-size:1rem;font-weight:500;display:flex}.big-spinner{border:4px solid #fff3;border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}#settings-panel::-webkit-scrollbar{width:4px}#settings-panel::-webkit-scrollbar-track{background:0 0}#settings-panel::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px}@media (width<=640px){#app{flex-direction:column}#settings-panel{border-right:none;border-bottom:1px solid var(--panel-border);width:100%;min-width:0;max-height:50vh}#viewport{flex:1;min-height:0}}