*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{overflow:hidden;background:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:12px}.app{width:100vw;height:100vh;overflow:hidden;position:relative}.field-canvas{position:fixed;top:0;left:0;display:block;cursor:crosshair}.fps-badge{position:fixed;bottom:12px;right:12px;background:#080503a6;color:#8a6030;font-size:11px;font-family:SF Mono,Fira Code,monospace;padding:3px 9px;border-radius:5px;pointer-events:none;letter-spacing:.06em;border:1px solid rgba(140,80,20,.2);z-index:20}.pause-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#080402a6;color:#e6aa46eb;font-size:28px;font-weight:700;letter-spacing:.25em;padding:14px 36px;border-radius:10px;border:1px solid rgba(200,120,30,.3);pointer-events:none;z-index:30}.panel{position:fixed;top:0;right:0;width:285px;height:100vh;background:#0b0704eb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-left:1px solid rgba(140,75,20,.2);display:flex;flex-direction:column;transition:transform .22s ease;z-index:10}.panel.collapsed{transform:translate(248px)}.panel-hdr{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;cursor:pointer;background:#26120673;border-bottom:1px solid rgba(140,75,20,.18);-webkit-user-select:none;user-select:none;flex-shrink:0}.panel-hdr:hover{background:#3419088c}.panel-title{color:#bf7e42;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.panel-arrow{color:#6e4820;font-size:11px}.panel-body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(140,75,20,.3) transparent}.panel-body::-webkit-scrollbar{width:4px}.panel-body::-webkit-scrollbar-track{background:transparent}.panel-body::-webkit-scrollbar-thumb{background:#8c4b144d;border-radius:2px}.global-row{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05)}.gbtn{flex:1;padding:6px 4px;background:#1e10068c;border:1px solid rgba(140,75,20,.28);border-radius:6px;color:#8a6842;font-size:10.5px;cursor:pointer;transition:background .14s,color .14s}.gbtn:hover{background:#371e0aa6;color:#c09060}.gbtn-pause{border-color:#dc962861;color:#e0a840}.gbtn-pause:hover{background:#41260699}.gbtn-play{border-color:#3ca06459;color:#5aaa70;background:#08231280}.gbtn-play:hover{background:#0c321999}.gbtn-rand{border-color:#a05ac852;color:#c088d8}.gbtn-rand:hover{background:#2d12378c}.section{border-bottom:1px solid rgba(255,255,255,.045)}.section-hdr{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;cursor:pointer;color:#7a5c38;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;-webkit-user-select:none;user-select:none}.section-hdr:hover{background:#ffffff06}.chevron{color:#5a3e22;font-size:10px}.section-body{padding:4px 12px 10px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px 12px 12px}.preset-btn{padding:7px 6px;background:#160b04b3;border:1px solid rgba(130,70,18,.25);border-radius:6px;color:#8a6840;font-size:10.5px;cursor:pointer;transition:all .14s;display:flex;align-items:center;gap:5px;text-align:left}.preset-btn:hover{background:#301908bf;color:#c8904e;border-color:#b4641e80}.pk{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:#8c460f47;border-radius:4px;font-size:9px;color:#a06830;font-weight:700;flex-shrink:0}.ctrl-row{display:flex;align-items:center;gap:8px;padding:3px 0;min-height:26px}.ctrl-row label{color:#5a4028;font-size:10px;min-width:66px;flex-shrink:0;line-height:1.3}.ctrl-row input[type=range]{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:#64370f47;border-radius:2px;outline:none;cursor:pointer}.ctrl-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#d07828;border-radius:50%;cursor:pointer;box-shadow:0 0 7px #d26e1e8c}.ctrl-row input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#d07828;border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 7px #d26e1e8c}.ctrl-row input[type=range]:hover::-webkit-slider-thumb{background:#e89040;box-shadow:0 0 10px #e68228bf}.val{color:#a87040;font-size:10px;font-family:SF Mono,Fira Code,monospace;min-width:42px;text-align:right;letter-spacing:.03em}.toggle-btn{padding:3px 11px;border-radius:4px;font-size:10px;cursor:pointer;font-weight:700;letter-spacing:.06em;transition:all .14s}.toggle-btn.on{background:#28784647;border:1px solid rgba(60,180,100,.45);color:#5ec880}.toggle-btn.off{background:#23140a73;border:1px solid rgba(90,55,25,.28);color:#4a3520}.toggle-btn.on:hover{background:#32915561}.toggle-btn.off:hover{background:#371e0c8c;color:#6a5030}.num-input{width:64px;padding:3px 7px;background:#140c06bf;border:1px solid rgba(120,80,40,.35);border-radius:4px;color:#c8a878;font-size:12px;font-family:inherit;text-align:right;outline:none}.num-input:focus{border-color:#b4783ca6;color:#e8c898}.num-input::-webkit-inner-spin-button,.num-input::-webkit-outer-spin-button{opacity:.4}.info-tip{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:4px;border-radius:50%;background:#78410f38;border:1px solid rgba(160,90,25,.3);color:#7a5030;font-size:8px;font-style:italic;font-weight:700;cursor:default;vertical-align:middle;position:relative;top:-1px;flex-shrink:0}.info-tip:hover{background:#96501461;color:#c09050}.info-tip:after{content:attr(data-tip);position:absolute;left:18px;top:50%;transform:translateY(-50%);background:#0c0703f7;border:1px solid rgba(150,80,25,.35);color:#b08860;font-size:10px;font-style:normal;font-weight:400;line-height:1.4;padding:6px 9px;border-radius:6px;width:180px;white-space:normal;pointer-events:none;opacity:0;transition:opacity .12s;z-index:999;box-shadow:0 4px 16px #0009}.info-tip:hover:after{opacity:1}.env-group{border-left:2px solid rgba(130,65,15,.2);padding-left:6px;margin-bottom:6px;margin-top:2px}.mode-btns{display:flex;flex-wrap:wrap;gap:4px;flex:1}.mode-btn{padding:3px 7px;background:#140a0499;border:1px solid rgba(110,58,14,.22);border-radius:4px;color:#5a3c20;font-size:9.5px;cursor:pointer;transition:all .13s}.mode-btn.active{background:#5a2d088c;border-color:#c86e1ea6;color:#e09848}.mode-btn:hover:not(.active){background:#2d16088c;color:#8a6040}.hue-slider{flex:1;height:8px!important;-webkit-appearance:none;appearance:none;border-radius:4px;outline:none;cursor:pointer;background:linear-gradient(to right,#ff1a1a,#ff8c1a,#ffff1a,#8cff1a,#1aff1a,#1aff8c,#1affff,#1a8cff,#1a1aff,#8c1aff,#ff1aff,#ff1a8c,#ff1a1a)!important}.hue-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 4px #0009}.hue-slider::-moz-range-thumb{width:14px;height:14px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 4px #0009}.hue-swatch{width:16px;height:16px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 6px #0006}.gbtn-shot{border-color:#3ca0be52;color:#5ab8d0;font-size:13px;flex:0 0 auto;padding:6px 10px}.gbtn-shot:hover{background:#082a3499}.gbtn-clear{border-color:#c85a3759;color:#d06840;font-size:9.5px}.gbtn-clear:hover{background:#3c12088c}.gbtn-cine{border-color:#b48c2d52;color:#b89038;font-size:10px;flex:0 0 auto;padding:6px 10px}.gbtn-cine:hover{background:#2d200699}.bg-presets{display:flex;flex-wrap:wrap;gap:5px;flex:1}.bg-btn{width:22px;height:22px;border-radius:5px;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .12s,border-color .12s}.bg-btn:hover{transform:scale(1.18);border-color:#ffffff59}.bg-btn.active{border-color:#dca03ccc;transform:scale(1.15);box-shadow:0 0 6px #c8821e59}.bg-preset-groups{display:flex;flex-direction:column;gap:4px}.bg-preset-row{display:flex;align-items:center;gap:5px}.bg-row-label{font-size:9px;color:#7a6040;min-width:24px;text-align:right;flex-shrink:0}.bg-btn-custom:after{content:"✎";position:absolute;bottom:1px;right:2px;font-size:8px;line-height:1;color:#ffffffbf;pointer-events:none;text-shadow:0 0 3px #000}.hint{color:#3a2510;font-size:9.5px;padding:4px 0 2px;font-style:italic;line-height:1.5}.app.cinematic .panel,.app.cinematic .fps-badge,.app.cinematic .pause-banner{display:none}.cinema-hint{position:fixed;bottom:24px;left:50%;transform:translate(-50%);color:#fff6;background:#00000059;font-size:11px;letter-spacing:.08em;padding:6px 18px;border-radius:20px;pointer-events:none;z-index:50;animation:cinema-fade 3s ease-out forwards}@keyframes cinema-fade{0%{opacity:1}65%{opacity:1}to{opacity:0}}.shortcuts{padding:10px 14px 14px;color:#3a2510;font-size:9.5px;line-height:1.7;letter-spacing:.04em}