*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0f;--bg-card: #12121a;--bg-card-hover: #1a1a28;--bg-selected: #1a2a1a;--border: #2a2a3a;--border-hover: #4a4a6a;--border-selected: #4ade80;--text: #e0e0e8;--text-dim: #6a6a80;--accent: #14b8a6;--accent-glow: rgba(20, 184, 166, .3);--green: #4ade80;--green-glow: rgba(74, 222, 128, .2)}html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{display:flex;flex-direction:column;height:100vh;gap:0}.navbar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:linear-gradient(180deg,#16161e,#12121a);border-bottom:1px solid var(--border);flex-shrink:0;z-index:20}.navbar-left{display:flex;align-items:center;gap:16px}.navbar-left .logo{text-decoration:none}.navbar-right,.user-menu{display:flex;align-items:center;gap:10px}.avatar{width:28px;height:28px;border-radius:50%;border:1px solid var(--border)}.btn-sm{padding:4px 12px;font-size:.75rem}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,#12121a,#0a0a0f);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}.header-left{display:flex;align-items:center;gap:16px}.logo{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#22d3ee,#38bdf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}.generation-badge{padding:4px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;font-size:.8rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.generation-badge span{color:var(--text);font-weight:600}.header-right{display:flex;align-items:center;gap:10px}.btn{padding:6px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);font-size:.8rem;cursor:pointer;transition:all .15s ease;font-family:inherit}.btn:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover{background:#0d9488;box-shadow:0 0 20px var(--accent-glow)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-danger{border-color:#7f1d1d;color:#fca5a5}.btn-danger:hover{background:#1a0a0a;border-color:#991b1b}.settings-bar{display:flex;align-items:center;padding:8px 20px;gap:20px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;font-size:.8rem}.setting{display:flex;align-items:center;gap:8px;color:var(--text-dim)}.setting label{white-space:nowrap}.setting select,.setting input[type=range]{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 6px;font-size:.8rem;font-family:inherit}.setting input[type=range]{width:80px;accent-color:var(--accent)}.setting .value{color:var(--text);font-variant-numeric:tabular-nums;min-width:2.5em}.hint{color:var(--text-dim);font-size:.75rem;margin-left:auto;font-style:italic}.grid-container{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px;padding:4px;overflow:hidden;min-height:0}.grid-cell{position:relative;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;background:var(--bg-card)}.grid-cell:hover{border-color:var(--border-hover);box-shadow:0 0 15px #7c3aed26}.grid-cell.selected{border-color:var(--border-selected);box-shadow:0 0 20px var(--green-glow),inset 0 0 30px var(--green-glow)}.grid-cell.parent{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.shape-canvas{width:100%;height:100%;display:block}.cell-label{position:absolute;bottom:4px;left:8px;font-size:.65rem;color:var(--text-dim);opacity:.5;pointer-events:none}.cell-label.parent-label{color:var(--accent);opacity:.8}.cell-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s ease;z-index:5}.grid-cell:hover .cell-actions{opacity:1}.cell-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:#12121ad9;color:var(--text-dim);cursor:pointer;transition:all .15s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0}.cell-btn:hover{background:var(--bg-card-hover);color:var(--text);border-color:var(--border-hover)}.cell-btn-save:hover{color:var(--green);border-color:var(--green)}.cell-btn-max:hover{color:var(--accent);border-color:var(--accent)}.cell-btn-code:hover{color:#22d3ee;border-color:#22d3ee}.maximize-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:150;cursor:pointer}.maximize-viewer{position:relative;width:80vmin;height:80vmin;max-width:800px;max-height:800px;border-radius:12px;overflow:hidden;border:1px solid var(--border);cursor:default}.maximize-viewer canvas{width:100%;height:100%;display:block}.maximize-close{position:absolute;top:10px;right:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:#12121ad9;color:var(--text-dim);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0;transition:all .15s ease}.maximize-close:hover{color:var(--text);border-color:var(--border-hover)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);padding:10px 24px;background:var(--accent);color:#fff;border-radius:12px;font-size:.85rem;font-weight:500;opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:100;box-shadow:0 8px 30px var(--accent-glow)}.toast.visible{transform:translate(-50%) translateY(0);opacity:1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200}.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;min-width:340px;max-width:90vw;display:flex;flex-direction:column;gap:12px}.modal h3{font-size:1.1rem;font-weight:600;margin-bottom:4px}.field-label{font-size:.75rem;color:var(--text-dim)}.field-input{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);font-size:.85rem;font-family:inherit;outline:none}.field-input:focus{border-color:var(--accent)}.field-checkbox{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-dim);cursor:pointer}.field-checkbox input[type=checkbox]{accent-color:var(--accent)}.confirm-message{font-size:.95rem;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.my-shapes-page{flex:1;overflow-y:auto;padding:20px}.page-header{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}.page-header h2{font-size:1.3rem;font-weight:600}.shape-count{font-size:.8rem;color:var(--text-dim)}.page-message{text-align:center;padding:60px 20px;color:var(--text-dim);font-size:.9rem}.page-message a{color:var(--accent);text-decoration:none}.shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.shape-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .15s ease}.shape-card:hover{border-color:var(--border-hover)}.shape-card-thumb{position:relative;aspect-ratio:1;background:var(--bg);cursor:pointer;overflow:hidden}.thumb-view-btn{position:absolute;bottom:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:#12121ad9;color:var(--text-dim);cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,border-color .15s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0}.shape-card-thumb:hover .thumb-view-btn{opacity:1}.thumb-view-btn:hover{color:var(--accent);border-color:var(--accent)}.shape-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg-card)}.thumb-placeholder{width:100%;height:100%;background:var(--bg)}.shape-card-info{padding:10px 12px 4px}.shape-card-name{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-card-meta{font-size:.7rem;color:var(--text-dim);margin-top:4px}.shape-card-tags{margin-left:6px}.tag{display:inline-block;padding:1px 6px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:.65rem;color:var(--text-dim);margin-left:4px}.shape-card-actions{display:flex;gap:6px;padding:8px 12px 12px}.card-icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-dim);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;padding:0}.card-icon-btn:hover{color:var(--text);border-color:var(--border-hover);background:var(--bg-card-hover)}.card-icon-btn.card-icon-active{color:var(--accent);border-color:var(--accent)}.card-icon-btn.card-icon-danger:hover{color:#ef4444;border-color:#ef4444}.nav-link{color:var(--text-dim);text-decoration:none;font-size:.85rem;transition:color .15s ease}.nav-link:hover{color:var(--text)}.gallery-page{flex:1;overflow-y:auto;padding:20px}.shape-card-author{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.75rem;color:var(--text-dim)}.avatar-sm{width:18px;height:18px;border-radius:50%;border:1px solid var(--border)}.tag-clickable{cursor:pointer;transition:border-color .15s ease,color .15s ease}.tag-clickable:hover{border-color:var(--accent);color:var(--text)}.load-more-container{display:flex;justify-content:center;padding:24px 0}.detail-page{flex:1;overflow-y:auto;padding:20px}.detail-back{margin-bottom:16px}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1200px}.detail-viewer{aspect-ratio:1;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.detail-canvas{width:100%;height:100%;display:block}.detail-info{display:flex;flex-direction:column;gap:16px}.detail-info h2{font-size:1.5rem;font-weight:600}.detail-author{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-dim)}.detail-meta{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text)}.meta-label{color:var(--text-dim);margin-right:8px}.detail-tags{display:flex;flex-wrap:wrap;gap:6px}.detail-forked{font-size:.8rem;color:var(--text-dim)}.detail-forked a{color:var(--accent);text-decoration:none}.detail-forked a:hover{text-decoration:underline}.detail-actions{display:flex;gap:10px;margin-top:8px}.code-panel{max-width:700px;width:90vw;max-height:80vh;padding:0;overflow:hidden;display:flex;flex-direction:column}.code-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.code-tabs{display:flex;gap:4px}.code-tab{padding:4px 14px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .15s ease}.code-tab:hover{color:var(--text);border-color:var(--border-hover)}.code-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.code-copy{padding:4px 12px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);font-size:.75rem;font-family:inherit;cursor:pointer;transition:all .15s ease}.code-copy:hover{color:var(--text);border-color:var(--border-hover)}.code-content{flex:1;overflow:auto;padding:16px;min-height:0}.code-content pre{margin:0;font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:.8rem;line-height:1.5;color:var(--text);white-space:pre;-moz-tab-size:2;tab-size:2}.graph-legend{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px;font-size:.7rem;font-family:Fira Code,Consolas,monospace}.graph-legend-sep{width:1px;height:14px;background:var(--border)}.seed-picker-modal{max-width:700px;width:90vw}.seed-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.seed-card{background:var(--bg);border:2px solid var(--border);border-radius:8px;padding:8px;cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;align-items:center}.seed-card:hover{border-color:var(--border-hover);box-shadow:0 0 12px var(--accent-glow)}.seed-card.selected{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}.seed-card canvas{width:120px;height:120px;display:block;border-radius:4px}.seed-name{text-align:center;font-size:.8rem;color:var(--text);margin-top:6px}.seed-random-icon{width:120px;height:120px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--text-dim);background:var(--bg-card);border-radius:4px}.seed-picker-btn{display:inline-flex;align-items:center;gap:4px}.about-page{flex:1;overflow-y:auto;padding:40px 20px;max-width:680px;margin:0 auto;line-height:1.7}.about-page h2{font-size:1.5rem;font-weight:600;margin-bottom:20px}.about-page h3{font-size:1.1rem;font-weight:600;margin-top:28px;margin-bottom:8px}.about-page p{color:var(--text-dim);font-size:.9rem;margin-bottom:12px}.about-page a{color:var(--accent);text-decoration:none}.about-page a:hover{text-decoration:underline}.fn-gallery-page{flex:1;overflow-y:auto;padding:20px}.fn-gallery-header{margin-bottom:24px}.fn-gallery-header h2{font-size:1.5rem;font-weight:600}.fn-gallery-header p{color:var(--text-dim);font-size:.85rem;margin-top:4px}.fn-gallery-section{margin-bottom:32px}.fn-gallery-section h3{font-size:1.1rem;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}.fn-section-count{font-size:.75rem;font-weight:400;color:var(--text-dim);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1px 8px}.fn-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.fn-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .15s ease}.fn-card:hover{border-color:var(--border-hover)}.fn-card-thumb-area{aspect-ratio:1;background:var(--bg);position:relative;overflow:hidden}.fn-card-thumb-area img{display:block;width:100%;height:100%;object-fit:cover}.fn-card-canvas{display:block;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.fn-card-placeholder{width:100%;height:100%;background:var(--bg)}.fn-card-body{padding:10px 12px 12px}.fn-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.fn-card-name{font-size:.95rem;font-weight:600;font-family:Fira Code,Cascadia Code,Consolas,monospace}.fn-arity-badge{font-size:.65rem;font-weight:500;padding:1px 8px;border-radius:10px;border:1px solid;text-transform:uppercase;letter-spacing:.04em}.fn-arity-badge.unary{color:#38bdf8;border-color:#38bdf8;background:#38bdf81a}.fn-arity-badge.binary{color:#a78bfa;border-color:#a78bfa;background:#a78bfa1a}.fn-arity-badge.ternary{color:#fb923c;border-color:#fb923c;background:#fb923c1a}.fn-card-desc{font-size:.78rem;color:var(--text-dim);line-height:1.4;margin-bottom:8px}.fn-card-code{font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:.72rem;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin:0;white-space:pre-wrap;word-break:break-all;line-height:1.4}.fn-card-evolve-btn{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .15s ease;padding:0;flex-shrink:0}.fn-card-evolve-btn:hover{color:var(--green);border-color:var(--green);background:#4ade801a}@media(max-width:800px){.grid-container{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(8,1fr)}.header{flex-wrap:wrap;gap:8px}.settings-bar{flex-wrap:wrap;gap:10px}.detail-layout{grid-template-columns:1fr}}