*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}.app{color:#352b30;height:100%;image-rendering:pixelated;background:#e6d4be;flex-direction:column;font:16px/1.5 Silkscreen,monospace;display:flex}.app-header{color:#e6d4be;background:#352b30;flex-shrink:0;align-items:center;gap:14px;height:44px;padding:0 14px;display:flex}.app-header h1{color:#e6d4be;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:16px;font-weight:700}.model-badge{color:#e6d4be8c;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid #e6d4be40;max-width:300px;padding:0 10px;font-size:16px;overflow:hidden}.header-spacer{flex:1}.header-btn{color:#e6d4be;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #e6d4be66;padding:4px 14px;font:16px/1.5 Silkscreen,monospace}.header-btn:hover{background:#e6d4be1f;border-color:#e6d4be}.app-main{flex:1;min-height:0;display:flex}.viewer-panel{background:#352b30;border-right:2px solid #352b30;flex:1;min-width:0;position:relative}.viewer-hint{color:#e6d4be4d;pointer-events:none;white-space:nowrap;font-size:16px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.viewer-overlay{z-index:10;background:#352b30bf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:3px solid #e6d4be40;border-top-color:#e6d4be;border-radius:50%;width:32px;height:32px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.drop-zone{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:repeating-conic-gradient(#e6d4be 0% 25%,#352b3012 0% 50%) 0 0/18px 18px;border:3px dashed #352b3033;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.drop-zone:hover,.drop-zone.dragging{background:#352b300a;border-color:#352b30}.drop-zone-inner{pointer-events:none;flex-direction:column;align-items:center;gap:18px;display:flex}.drop-zone-inner svg{color:#352b304d;width:52px;height:52px}.drop-zone-inner p{color:#352b3073;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:16px;font-weight:700}.drop-zone-inner span{color:#352b304d;font-size:16px}.config-panel{background:#e6d4be;border-left:2px solid #352b30;flex-direction:column;flex-shrink:0;gap:14px;width:284px;padding:14px;display:flex;overflow-y:auto}.panel-title{letter-spacing:.1em;text-transform:uppercase;color:#352b3073;border-bottom:1px solid #352b304d;padding-bottom:8px;font-size:16px;font-weight:700}.cfg{flex-direction:column;gap:5px;display:flex}.cfg>label{color:#352b308c;letter-spacing:.04em;text-transform:uppercase;font-size:16px;font-weight:700}.cfg input,.cfg select{color:#352b30;background:#e6d4be;border:1px solid #352b3040;border-color:#352b30b3 #352b3040 #352b3040 #352b30b3;outline:none;width:100%;padding:6px 8px;font:16px/1.5 Silkscreen,monospace}.cfg input:focus,.cfg select:focus{outline-offset:1px;border-color:#352b30;outline:2px solid #352b30}.cfg select option{color:#352b30;background:#e6d4be}.size-row{align-items:center;gap:6px;display:flex}.size-row input{flex:1}.size-row span{color:#352b3073;flex-shrink:0}.preset-row{flex-wrap:wrap;gap:4px;display:flex}.preset-btn{color:#352b3099;cursor:pointer;background:#e6d4be;border:1px solid #352b3099;border-color:#352b3033 #352b3099 #352b3099 #352b3033;padding:4px 9px;font:16px/1.5 Silkscreen,monospace}.preset-btn:hover{color:#352b30;border-color:#352b30}.preset-btn.active{color:#e6d4be;background:#352b30;border-color:#352b30}.toggle-row{gap:4px;display:flex}.toggle-row button{color:#352b3099;cursor:pointer;background:#e6d4be;border:1px solid #352b3099;border-color:#352b3033 #352b3099 #352b3099 #352b3033;flex:1;padding:6px 4px;font:16px/1.5 Silkscreen,monospace}.toggle-row button:hover{color:#352b30;border-color:#352b30}.toggle-row button.active{color:#e6d4be;background:#352b30;border-color:#352b30}.cfg-divider{border:none;border-top:1px solid #352b3040;margin:2px 0}.generate-btn{color:#e6d4be;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#352b30;border:2px solid #352b30;width:100%;padding:10px 12px;font:700 16px/1.5 Silkscreen,monospace}.generate-btn:hover:not(:disabled){background:#4a3c42;border-color:#4a3c42}.generate-btn:active:not(:disabled){background:#251e22;border-color:#251e22}.generate-btn:disabled{opacity:.3;cursor:not-allowed}.error-msg{color:#352b30;word-break:break-word;background:#352b3012;border:1px solid #352b30;padding:7px 10px;font-size:16px;line-height:1.6}.idle-hint{color:#352b3059;text-align:center;margin-top:auto;padding-top:8px;font-size:16px;line-height:1.9}.output-panel{background:#e6d4be;border-top:2px solid #352b30;flex-direction:column;flex-shrink:0;max-height:40vh;display:flex}.output-header{border-bottom:1px solid #352b3040;flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;display:flex}.output-header h2{letter-spacing:.1em;text-transform:uppercase;color:#352b3073;margin:0;font-size:16px;font-weight:700}.output-meta{color:#352b3080;font-size:16px}.output-header-spacer{flex:1}.download-btn{color:#e6d4be;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;white-space:nowrap;background:#352b30;border:2px solid #352b30;padding:5px 14px;font:700 16px/1.5 Silkscreen,monospace;text-decoration:none}.download-btn:hover{background:#4a3c42;border-color:#4a3c42}.output-scroll{background:repeating-conic-gradient(#e6d4be 0% 25%,#352b300f 0% 50%) 0 0/18px 18px;flex:1;padding:14px;overflow:auto}.output-scroll img{image-rendering:pixelated;max-width:none;display:block}