@import "https://fonts.googleapis.com/css2?family=VT323&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0008;--bg2:#060006;--bg3:#0e000c;--surface:#110010;--surface2:#1a0018;--surface3:#160014;--hi:#f080a0;--hi2:#f080a0;--hi3:#ff3070;--hi-dim:#f080a080;--hi-dark:#f080a066;--hi-darker:#f080a026;--hi-darkest:#f080a00f;--accent:#ff2060;--accent2:#ff80b0;--white:#fff0f4;--bv-light:#f080a066;--bv-dark:#f080a026;--text:#fff0f4;--text-dim:#f080a0b3;--text-dark:#f080a073;--text-darker:#f080a040;--font-ui:"VT323", monospace}.light{--bg:#fff0f4;--bg2:#f8e8f0;--bg3:#fce0ec;--surface:#fff;--surface2:#fce8f0;--surface3:#f8e0ec;--hi:#f080a0;--hi2:#f080a0;--hi3:#ff3070;--hi-dim:#f080a099;--hi-dark:#f080a080;--hi-darker:#f080a040;--hi-darkest:#f080a01a;--accent:#ff2060;--accent2:#e04060;--white:#1a0010;--text:#1a0010;--text-dim:#b42850cc;--text-dark:#b4285099;--text-darker:#b4285066}.light .logo-block{background:#fff0f4}.light .logo-text{color:var(--accent);text-shadow:1px 1px #ff206026}.light .tab{color:#fff0f4}.light .tab.active{color:var(--accent);background:#fff0f4}.light .tab.icon-btn{color:#fff0f4}.light .tab:hover{background:#ffffff40}.light .modal-title,.light .modal-close{color:#fff0f4}.light .modal-close:hover{opacity:.7}.light .viewport{background:#fff0f4}html,body,#root{height:100%}body{color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:none;image-rendering:pixelated;background:#060006}body:after{content:"";pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#0000001f 2px 4px);position:fixed;inset:0}.app{background:var(--bg);border-left:4px solid var(--accent);border-right:2px solid var(--hi-darker);flex-direction:column;max-width:1400px;height:100vh;margin:0 auto;display:flex;position:relative;overflow:hidden}.app:before{content:"";pointer-events:none;z-index:0;background:repeating-linear-gradient(-45deg,#0000,#0000 6px,#ff20600d 6px 7px);width:220px;height:220px;position:absolute;top:-20px;right:-20px}.topbar{background:var(--accent);z-index:10;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);flex-shrink:0;align-items:stretch;height:48px;display:flex;position:relative}.logo-block{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,0 100%);background:#000;border:none;align-items:center;margin-right:4px;padding:0 20px 0 16px;display:flex}.logo-text{font-family:var(--font-ui);color:var(--accent);letter-spacing:.18em;text-shadow:2px 2px #000;font-size:26px}.tab-spacer{flex:1}.tabs{align-items:stretch;display:flex}.tab{font-family:var(--font-ui);letter-spacing:.16em;color:#000;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:0 0;border:none;align-items:center;padding:0 24px;font-size:20px;transition:background .1s,color .1s;display:flex}.tab:hover{background:#0003}.tab.active{color:var(--accent);background:#000}.tab.icon-btn{color:#000;padding:0 16px;font-size:18px}.tab.icon-btn:hover{background:#00000040}.main{background:var(--bg2);z-index:1;flex:1;gap:4px;min-height:0;padding:4px;display:flex;position:relative;overflow:hidden}.sidebar{flex-direction:column;flex-shrink:0;gap:4px;width:210px;display:flex;overflow-y:auto}.center-col{flex-direction:column;flex:1;gap:4px;min-width:0;min-height:0;display:flex}.viewport-wrapper{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}.right-col{flex-direction:column;flex-shrink:0;gap:4px;width:210px;display:flex}.panel{background:var(--surface);border-left:4px solid var(--accent);border-top:1px solid var(--hi-darker);border-right:1px solid var(--hi-darker);border-bottom:1px solid var(--hi-darkest);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);padding:8px 10px 8px 14px;position:relative}.panel-label{color:var(--accent);letter-spacing:.22em;text-transform:uppercase;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;display:flex}.panel-label:before{content:"▶";color:var(--accent);flex-shrink:0;font-size:9px}.bv,.bi{border-left:4px solid var(--accent);border-top:1px solid var(--hi-darker);border-right:1px solid var(--hi-darkest);border-bottom:1px solid var(--hi-darkest);background:var(--surface);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}.ctrl-row{align-items:center;gap:6px;margin-bottom:6px;display:flex}.ctrl-label{color:var(--text-dim);letter-spacing:.1em;flex-shrink:0;min-width:60px;font-size:13px}.ctrl-track{background:var(--bg2);border:1px solid var(--hi-darker);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,4px 100%);flex:1;height:6px;position:relative}.ctrl-fill{background:linear-gradient(90deg, var(--accent), var(--hi2));pointer-events:none;height:100%}.ctrl-val{color:var(--hi);text-align:right;flex-shrink:0;min-width:36px;font-size:16px}.ctrl-select{background:var(--bg2);border-left:3px solid var(--accent);border-top:1px solid var(--hi-darker);border-right:1px solid var(--hi-darker);border-bottom:1px solid var(--hi-darker);width:100%;font-family:var(--font-ui);color:var(--hi);letter-spacing:.1em;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);outline:none;margin-bottom:6px;padding:3px 8px;font-size:16px}.ctrl-select option{background:var(--bg)}.tile-row{gap:4px;display:flex}.tile-btn{font-family:var(--font-ui);letter-spacing:.12em;color:var(--text-dark);background:var(--bg2);cursor:pointer;border:1px solid var(--hi-darker);border-left:3px solid var(--hi-dark);clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);flex:1;padding:5px 0;font-size:16px;transition:color .1s,border-color .1s}.tile-btn:hover{color:var(--hi);border-left-color:var(--accent)}.tile-btn.active{color:var(--accent);background:var(--surface2);border-left-color:var(--accent)}.action-btn{font-family:var(--font-ui);letter-spacing:.14em;color:var(--text-dim);background:var(--bg2);cursor:pointer;border:1px solid var(--hi-darker);border-left:3px solid var(--hi-dark);white-space:nowrap;clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);padding:5px 14px;font-size:17px;transition:color .1s,border-color .1s,background .1s}.action-btn:hover:not(:disabled){color:var(--hi);border-left-color:var(--accent);background:var(--surface2)}.action-btn:disabled{opacity:.3;cursor:not-allowed}.action-btn.primary{color:var(--accent);border-left-color:var(--accent);background:var(--surface2)}.action-btn.primary:hover:not(:disabled){color:var(--white);background:var(--accent);border-color:var(--accent)}.dialog-bar{background:var(--bg);border-top:3px solid var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,16px 100%);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex;position:relative}.dialog-bar:before{content:"";background:var(--accent);width:4px;position:absolute;top:0;bottom:0;left:0}.dialog-left{flex-shrink:0;align-items:center;display:flex}.dialog-arrow{border-top:6px solid #0000;border-bottom:6px solid #0000;border-right:10px solid var(--accent);flex-shrink:0;width:0;height:0}.dialog-bubble{background:var(--surface);border-left:3px solid var(--accent);border-top:1px solid var(--hi-darker);border-right:1px solid var(--hi-darker);border-bottom:1px solid var(--hi-darker);clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);min-width:180px;padding:6px 14px}.dialog-text{font-family:var(--font-ui);color:var(--text);letter-spacing:.08em;text-align:left;font-size:22px;line-height:1.2;display:block}.dialog-text .accent{color:var(--accent)}.dialog-btns{flex-shrink:0;gap:5px;display:flex}.emoticon{font-family:var(--font-ui);color:var(--accent);letter-spacing:.02em;text-align:center;-webkit-user-select:none;user-select:none;flex-shrink:0;min-width:90px;padding:0 8px;font-size:20px}.viewport{background:var(--bg);flex:1;width:100%;height:100%;min-height:0;display:block;position:relative;overflow:hidden}.viewport canvas{image-rendering:pixelated;display:block;width:100%!important;height:100%!important}.drop-zone{border:2px dashed var(--hi-dark);border-left:3px solid var(--accent);text-align:center;cursor:pointer;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);padding:20px 10px;transition:border-color .15s,background .15s}.drop-zone:hover{border-color:var(--accent);background:#ff20600d}.drop-zone-text{color:var(--hi-dark);letter-spacing:.1em;font-size:15px;line-height:1.8}.palette-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.palette-item{background:var(--bg2);cursor:pointer;border:1px solid var(--hi-darker);border-left:3px solid var(--hi-dark);clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);padding:5px 6px;transition:border-color .1s}.palette-item:hover{border-left-color:var(--accent)}.palette-item.active{background:var(--surface2);border-left-color:var(--accent);border-top-color:var(--accent)}.palette-swatches{gap:2px;margin-bottom:3px;display:flex}.palette-swatch{flex-shrink:0;width:8px;height:8px}.palette-name{color:var(--text-darker);letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.palette-item.active .palette-name{color:var(--accent)}.face-entry{background:var(--bg2);cursor:pointer;border:1px solid var(--hi-darker);border-left:4px solid var(--hi-dark);clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);align-items:center;gap:6px;margin-bottom:4px;padding:5px 6px;transition:border-color .1s;display:flex}.face-entry.active{background:var(--surface2);border-left-color:var(--accent)}.face-entry:hover{border-left-color:var(--hi)}.face-thumb{background:var(--bg);border:1px solid var(--hi-darker);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.face-thumb img{object-fit:cover;width:100%;height:100%;image-rendering:pixelated}.face-info{flex:1;min-width:0;overflow:hidden}.face-label{color:var(--text-dim);letter-spacing:.1em;white-space:nowrap;text-overflow:ellipsis;font-size:13px;display:block;overflow:hidden}.face-entry.active .face-label{color:var(--accent)}.face-sublabel{color:var(--hi-dark);letter-spacing:.06em;white-space:nowrap;font-size:10px}.modal-overlay{z-index:1000;background:#000000d9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal{background:var(--bg);border-left:6px solid var(--accent);border-top:2px solid var(--hi-darker);border-right:2px solid var(--hi-darker);border-bottom:2px solid var(--hi-darker);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);flex-direction:column;width:100%;max-width:640px;max-height:85vh;display:flex;position:relative}.modal-header{background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,8px 100%);justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.modal-title{font-family:var(--font-ui);color:#fff0f4;letter-spacing:.18em;text-shadow:1px 1px #0000004d;font-size:26px}.modal-close{font-family:var(--font-ui);color:#fff0f4;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:22px;line-height:1}.modal-close:hover{opacity:.7}.modal-body{flex-direction:column;gap:16px;min-height:0;padding:20px 24px 24px;display:flex;overflow-y:auto}.modal-section{border-left:3px solid var(--accent);padding-left:12px}.modal-section-title{font-family:var(--font-ui);color:var(--accent);letter-spacing:.16em;margin-bottom:6px;font-size:18px}.modal-section-title:before{content:"▶ ";font-size:11px}.modal-text{font-family:var(--font-ui);color:var(--text-dim);letter-spacing:.06em;font-size:17px;line-height:1.6}.modal-text .accent{color:var(--hi)}.modal-footer{justify-content:flex-end;padding:0 24px 20px;display:flex}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--accent)}.tab img{display:block}