@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600&display=swap";:root{--bg-color:#000;--text-color:#f0f0f0;--text-muted:#888;--panel-bg:#111;--border-color:#333;--primary:#fff;--primary-invert:#000;--font-mono:"JetBrains Mono", monospace;--font-sans:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-mono);-webkit-font-smoothing:antialiased}.app-container{flex-direction:column;min-height:100vh;display:flex}.navbar{border-bottom:1px solid var(--border-color);padding:1.5rem 2rem}.wordmark{letter-spacing:-.05em;font-size:1.5rem;font-weight:700}.editor-layout{flex:1;display:flex;overflow:hidden}@media (width<=900px){.editor-layout{flex-direction:column}}.canvas-col{background-color:#050505;flex:1;justify-content:center;align-items:center;padding:2rem;display:flex}.canvas-wrapper{aspect-ratio:1;border:1px solid var(--border-color);background:#1a1a1a;width:100%;max-width:500px;position:relative}.pfp-canvas{object-fit:contain;width:100%;height:100%;display:block}.tick{border:0 solid #666;width:10px;height:10px;position:absolute}.tick.tl{border-top-width:2px;border-left-width:2px;top:-1px;left:-1px}.tick.tr{border-top-width:2px;border-right-width:2px;top:-1px;right:-1px}.tick.bl{border-bottom-width:2px;border-left-width:2px;bottom:-1px;left:-1px}.tick.br{border-bottom-width:2px;border-right-width:2px;bottom:-1px;right:-1px}.panel-col{background-color:var(--panel-bg);border-left:1px solid var(--border-color);flex-direction:column;width:400px;padding:2rem;display:flex}@media (width<=900px){.panel-col{border-left:none;border-top:1px solid var(--border-color);width:100%}}.trait-panel{flex-direction:column;height:100%;display:flex}.panel-head{text-transform:uppercase;color:var(--text-muted);letter-spacing:.1em;justify-content:space-between;margin-bottom:2rem;font-size:.85rem;display:flex}.trait-list{flex:1;list-style:none}.trait-list li{align-items:center;margin-bottom:1rem;font-size:.95rem;display:flex}.trait-list li.is-none{color:var(--text-muted)}.trait-key{text-transform:uppercase}.dots{border-bottom:1px dotted var(--border-color);opacity:.5;flex:1;margin:0 .5rem}.trait-value{text-transform:uppercase}.panel-actions{flex-wrap:wrap;gap:.5rem;margin-top:2rem;display:flex}.btn{color:var(--text-color);border:1px solid var(--border-color);font-family:var(--font-mono);text-transform:uppercase;cursor:pointer;letter-spacing:.05em;background:0 0;padding:1rem;font-size:.9rem;transition:all .2s}.btn:hover:not(:disabled){background:var(--border-color)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn.primary{background:var(--primary);color:var(--primary-invert);flex:1;font-weight:700}.btn.primary:hover{opacity:.9;background:var(--primary)}.btn.arrow{justify-content:center;align-items:center;width:3rem;display:flex}.btn.wide{width:100%;margin-top:.5rem}.hint{text-align:center;color:var(--text-muted);margin-top:1.5rem;font-size:.8rem}kbd{font-family:var(--font-mono);background:#222;border:1px solid #333;border-radius:4px;padding:.2rem .4rem}