@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background-color:teal;background-image:repeating-linear-gradient(45deg,#007070 0px,#007070 1px,transparent 1px,transparent 8px);min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:"MS Sans Serif",Arial,sans-serif;font-size:12px}.app-root{width:820px;background:silver;border:2px solid;border-color:#ffffff #808080 #808080 #ffffff;box-shadow:4px 4px #000}.title-bar{background:linear-gradient(to right,navy,#1084d0);color:#fff;display:flex;align-items:center;gap:6px;padding:3px 6px;font-weight:700;font-size:12px;-webkit-user-select:none;user-select:none}.title-bar-icon{font-size:14px}.title-bar-text{flex:1;letter-spacing:.5px}.title-bar-btns{display:flex;gap:2px}.title-bar-btns span{display:inline-flex;align-items:center;justify-content:center;width:16px;height:14px;background:silver;color:#000;font-size:10px;border:1px solid;border-color:#ffffff #808080 #808080 #ffffff;cursor:pointer;font-weight:700;line-height:1}.app-body{display:flex;gap:0;padding:8px;gap:8px}.panel-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#444;margin-bottom:4px;padding-left:2px}.preview-panel{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.canvas-wrapper{position:relative;border:2px solid;border-color:#808080 #ffffff #ffffff #808080;background:#fff;box-shadow:inset 1px 1px #000}.preview-canvas{display:block;width:380px;height:380px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.canvas-notice{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;color:#666;background:#ffffffd9;padding:4px;border-top:1px solid #ccc;pointer-events:none}.download-btn{width:100%;padding:6px 16px;background:silver;border:2px solid;border-color:#ffffff #808080 #808080 #ffffff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;color:#000;letter-spacing:.5px;transition:none}.download-btn:hover{background:#d0d0d0}.download-btn:active{border-color:#808080 #ffffff #ffffff #808080;padding:7px 15px 5px 17px}.download-btn:disabled{color:gray;cursor:default}.traits-panel{flex:1;display:flex;flex-direction:column;gap:6px;border:2px solid;border-color:#808080 #ffffff #ffffff #808080;background:silver;box-shadow:inset 1px 1px #000;padding:8px;min-width:0}.category-tabs{display:flex;gap:2px;border-bottom:2px solid #808080;padding-bottom:0}.category-tab{padding:4px 16px 6px;background:silver;border:2px solid;border-bottom:none;border-color:#ffffff #808080 transparent #ffffff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;color:#000;position:relative;bottom:-2px}.category-tab.active{background:silver;border-color:#ffffff #808080 #c0c0c0 #ffffff;z-index:1}.category-tab:not(.active):hover{background:#d0d0d0}.trait-list{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:8px 4px;overflow-y:auto;max-height:300px;background:#d4d0c8;border:2px solid;border-color:#808080 #ffffff #ffffff #808080;box-shadow:inset 1px 1px #000;align-content:start}.trait-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:silver;border:2px solid;border-color:#ffffff #808080 #808080 #ffffff;cursor:pointer;font-family:inherit;font-size:10px;color:#000;transition:none}.trait-btn:hover{background:#d8d8d8}.trait-btn:active{border-color:#808080 #ffffff #ffffff #808080}.trait-btn.selected{border-color:#808080 #ffffff #ffffff #808080;background:#b8d8f8;box-shadow:inset 1px 1px #00a}.trait-thumb{width:64px;height:64px;border:1px solid #808080;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;image-rendering:pixelated;flex-shrink:0}.trait-img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.trait-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:2px;background:#f0f0f0}.trait-empty-x{font-size:18px;color:#aaa;line-height:1}.trait-empty-label{font-size:8px;color:#999;text-transform:uppercase;letter-spacing:1px}.trait-name{font-size:10px;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.traits-hint{font-size:10px;color:#555;border:1px solid #aaa;background:ivory;padding:6px 8px;line-height:1.6;text-align:center}.traits-hint code{font-family:Courier New,monospace;font-size:9px;background:#e0e0e0;padding:0 3px;border:1px solid #aaa;color:navy}.status-bar{background:silver;border-top:2px solid #808080;display:flex;align-items:center;gap:0;padding:2px 8px;font-size:11px;color:#000}.status-item{padding:1px 8px;border:1px solid;border-color:#808080 #ffffff #ffffff #808080;font-size:11px}.status-divider{width:4px;text-align:center;color:gray}.status-spacer{flex:1}.x-link-wrapper{display:flex;justify-content:center;margin-top:10px}.x-link{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border:1px solid;border-color:#808080 #ffffff #ffffff #808080;font-size:10px;color:navy;text-decoration:none;background:silver}.x-link:hover{text-decoration:underline;background:#d0d0d0}.x-link svg{display:block;color:#000}