*{margin:0;padding:0;box-sizing:border-box}body{background:#0f0f1a;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh}#app{min-height:100vh}.top-bar{background:#16162a;border-bottom:1px solid #2a2a4a;padding:16px 32px;display:flex;align-items:center;gap:12px}.top-bar h1{font-size:20px;font-weight:600;color:#fff}.back-button{background:none;border:1px solid #3a3a5a;color:#e0e0e0;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:background .2s}.back-button:hover{background:#2a2a4a}.shader-grid{padding:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.shader-card{background:#1a1a2e;border:1px solid #2a2a4a;border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s}.shader-card:hover{border-color:#4a9eff;transform:translateY(-2px)}.shader-card canvas{width:100%;aspect-ratio:16 / 9;display:block}.shader-card-info{padding:12px 16px}.shader-card-info h3{font-size:15px;font-weight:500;color:#fff}.shader-page{display:flex;height:calc(100vh - 53px)}.code-panel{width:45%;display:flex;flex-direction:column;border-right:1px solid #2a2a4a;background:#1e1e2e;min-width:0}.code-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2a2a4a;flex-shrink:0}.code-header h2{font-size:14px;font-weight:500;color:#aac}.copy-button{background:#2a2a4a;border:1px solid #3a3a5a;color:#e0e0e0;padding:5px 14px;border-radius:6px;cursor:pointer;font-size:12px;transition:background .2s}.copy-button:hover{background:#3a3a5a}.copy-button.copied{background:#1a6b3a;border-color:#2a8b4a}.code-container{flex:1;overflow:auto;padding:0}.code-container pre{margin:0;padding:16px;font-size:13px;line-height:1.6;tab-size:4}.code-container code{font-family:Consolas,Monaco,Courier New,monospace}.code-container .hljs{background:transparent;padding:0}.code-line{display:block}.line-number{display:inline-block;width:40px;text-align:right;padding-right:16px;color:#557;-webkit-user-select:none;user-select:none;flex-shrink:0}.preview-panel{flex:1;display:flex;flex-direction:column;background:#12121f;min-width:0}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2a2a4a;flex-shrink:0}.preview-label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500}.fps-counter{background:#2a2a4a;padding:2px 8px;border-radius:4px;font-size:12px;font-family:monospace;color:#8c8}.mesh-buttons{display:flex;gap:6px}.mesh-btn{padding:5px 14px;border:1px solid #3a3a5a;background:#2a2a4a;color:#c0c0d0;border-radius:6px;cursor:pointer;font-size:12px;transition:background .2s,border-color .2s}.mesh-btn:hover{background:#3a3a5a}.mesh-btn.active{background:#2563eb;border-color:#3b82f6;color:#fff}.preview-canvas-container{flex:1;position:relative;overflow:hidden}.preview-canvas-container canvas{width:100%;height:100%;display:block}@media(max-width:768px){.shader-page{flex-direction:column;height:auto}.code-panel{width:100%;height:50vh;border-right:none;border-bottom:1px solid #2a2a4a}.preview-panel{height:50vh}.shader-grid{padding:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#3a3a5a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a4a6a}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#1e1e1e;color:#dcdcdc}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name{color:#569cd6}.hljs-link{color:#569cd6;text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-number,.hljs-class{color:#b8d7a3}.hljs-string,.hljs-meta .hljs-string{color:#d69d85}.hljs-regexp,.hljs-template-tag{color:#9a5334}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:#dcdcdc}.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}.hljs-doctag{color:#608b4e}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-tag{color:#9b9b9b}.hljs-variable,.hljs-template-variable{color:#bd63c5}.hljs-attr,.hljs-attribute{color:#9cdcfe}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#d7ba7d}.hljs-addition{background-color:#144212;display:inline-block;width:100%}.hljs-deletion{background-color:#600;display:inline-block;width:100%}