:root{--bg-dark:#1a1a2e;--bg-darker:#16162a;--bg-editor:#0f0f1a;--text-primary:#e0e0e0;--text-secondary:#888;--accent:#6366f1;--accent-hover:#818cf8;--error:#f87171;--success:#4ade80;--border:#2a2a4a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-dark);color:var(--text-primary);flex-direction:column;height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:flex;overflow:hidden}header{background:var(--bg-darker);border-bottom:1px solid var(--border);z-index:5;justify-content:space-between;align-items:center;min-height:56px;padding:10px 24px;display:flex;position:relative}.logo{letter-spacing:.01em;background:linear-gradient(135deg, #a5b4fc 0%, var(--accent) 40%, #a855f7 80%, #ec4899 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding-top:4px;font-family:Lobster,cursive;font-size:1.9rem;font-weight:400;line-height:1;text-decoration:none}.header-right{align-items:center;gap:16px;display:flex}.header-nav{align-items:center;gap:4px;display:flex}.header-nav-link{color:var(--text-secondary);border-radius:6px;padding:6px 10px;font-size:.85rem;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.header-nav-link:hover{color:var(--text-primary);background:#ffffff0f}.header-user{align-items:center;gap:10px;display:flex}.user-chip{border:1px solid var(--border);color:var(--text-primary);background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:4px 10px 4px 4px;font-size:.85rem;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.user-chip:hover{border-color:var(--accent);background:#ffffff14}.user-avatar{border-radius:50%;width:24px;height:24px;display:block}.signin-link{background:var(--accent);color:#fff;border-radius:6px;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .2s;display:inline-flex}.signin-link:hover{background:var(--accent-hover)}.toolbar{align-items:center;gap:12px;display:flex}button{background:var(--accent);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:6px;padding:8px 18px;font-family:inherit;font-size:.9rem;font-weight:500;transition:background .15s,border-color .15s,transform .1s}button:hover{background:var(--accent-hover)}button:active{transform:scale(.98)}button:disabled{background:var(--border);cursor:not-allowed;opacity:.6}button.btn-secondary{color:var(--text-primary);border:1px solid var(--border);background:0 0}button.btn-secondary:hover{border-color:var(--accent);background:#ffffff0f}button.btn-secondary:disabled{color:var(--text-secondary);border-color:var(--border);background:0 0}button.btn-ghost{color:var(--text-secondary);background:0 0;border:none;padding:6px 10px;font-size:.8rem}button.btn-ghost:hover{color:var(--text-primary);background:#ffffff0f}.panel-toolbar{align-items:center;gap:10px;display:flex}.panel-toolbar>*+*{margin-left:2px}.main-content{flex:1;gap:12px;padding:12px;display:flex;overflow:hidden}.editor-panel{border:1px solid var(--border);background:var(--bg-darker);border-radius:8px;flex-direction:column;flex:1;display:flex;overflow:hidden}.panel-header{background:var(--bg-darker);color:var(--text-secondary);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;font-size:.85rem;display:flex}.title-input{min-width:0;color:var(--text-primary);background:0 0;border:1px solid #0000;border-radius:4px;flex:1;padding:4px 8px;font-family:inherit;font-size:.95rem;font-weight:500;transition:background .15s,border-color .15s}.title-input::placeholder{color:var(--text-secondary);font-style:italic;font-weight:400}.title-input:hover:not(:disabled){border-color:var(--border)}.title-input:focus{border-color:var(--accent);background:#ffffff0a;outline:none}.title-input:disabled{cursor:default;opacity:1}.editor-container{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.cm-editor{flex:1;height:100%;min-height:0;font-family:JetBrains Mono,Fira Code,SF Mono,Monaco,Consolas,monospace;font-size:14px;line-height:1.6}.cm-scroller{overflow:auto}.cm-scroller::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}.cm-scroller::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}.cm-scroller::-webkit-scrollbar-thumb:hover{background:#3a3a5a}.cm-scroller::-webkit-scrollbar-track{background:var(--bg-darker)}.cm-gutters{background:var(--bg-darker)!important;border-right:1px solid var(--border)!important}.cm-lineNumbers .cm-gutterElement{color:var(--text-secondary)}.cm-line-error{background:#f8717126!important}.cm-error-underline{-webkit-text-decoration:underline wavy var(--error);text-decoration:underline wavy var(--error);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}.preview-panel{flex-direction:column;flex:1;min-width:0;display:flex}.preview-window{border:1px solid var(--border);background:var(--bg-darker);border-radius:8px;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.canvas-container{background:#000;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.webgpu-unavailable{z-index:2;text-align:center;color:var(--text-primary);background:#0f0f1af2;flex-direction:column;justify-content:center;align-items:center;padding:32px 28px;display:flex;position:absolute;inset:0}.webgpu-unavailable-icon{color:var(--accent);margin-bottom:12px;font-size:2.5rem;line-height:1}.webgpu-unavailable h2{margin-bottom:10px;font-size:1.2rem;font-weight:600}.webgpu-unavailable-detail{color:var(--text-secondary);border:1px solid var(--border);background:#ffffff0a;border-radius:4px;max-width:90%;margin-bottom:14px;padding:6px 10px;font-family:JetBrains Mono,monospace;font-size:.78rem}.webgpu-unavailable-hint{color:var(--text-secondary);max-width:380px;font-size:.85rem;line-height:1.55}.webgpu-unavailable-hint code{color:var(--text-primary);background:#ffffff0f;border-radius:3px;margin:0 1px;padding:1px 6px;font-family:JetBrains Mono,monospace;font-size:.78rem}.webgpu-unavailable-link{color:var(--accent);text-decoration:none}.webgpu-unavailable-link:hover{text-decoration:underline}#canvas{width:100%;height:100%;display:block}.output-panel{background:var(--bg-darker);border:1px solid var(--border);border-radius:8px;flex-direction:column;height:200px;min-height:100px;display:flex;overflow:hidden}.resize-handle-h{cursor:ns-resize;background:0 0;flex-shrink:0;height:12px;position:relative}.resize-handle-h:before{content:"";background:var(--border);border-radius:1px;height:2px;transition:background .2s;position:absolute;top:5px;left:0;right:0}.resize-handle-h:hover:before,.resize-handle-h.dragging:before{background:var(--accent)}.canvas-bottom-bar{color:var(--text-primary);background:var(--bg-darker);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:8px 14px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.75rem;display:flex}.cbb-section{align-items:center;gap:10px;display:flex}.cbb-left{flex-direction:column;flex:1;align-items:flex-start;gap:2px}.cbb-center{flex:1;justify-content:center}.cbb-right{flex:1;justify-content:flex-end}.cbb-btn{background:var(--bg-darker);width:26px;height:26px;color:var(--text-primary);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:10px;line-height:1;display:flex}.cbb-btn.pause{background:var(--error);color:#fff}.cbb-btn.play,.cbb-btn.reset{background:var(--success);color:#16162a}.cbb-btn.rec{background:var(--success);color:#16162a;font-size:8px;font-weight:700}.cbb-btn:disabled{background:var(--border);color:var(--text-secondary);cursor:not-allowed;opacity:.6}.cbb-btn.fullscreen{color:var(--text-secondary);background:0 0}.cbb-btn.fullscreen:hover{color:var(--text-primary)}.resolution{color:var(--text-primary);align-items:center;display:inline-flex}.pipeline-widget{background:var(--bg-darker);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex-shrink:0;min-height:0;margin-top:12px;display:flex;overflow:hidden}.pipeline-widget.open{max-height:280px}.pipeline-widget-header{background:var(--bg-darker);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;cursor:pointer;text-align:left;border:none;border-bottom:1px solid #0000;border-radius:0;flex-shrink:0;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:.7rem;display:flex}.pipeline-widget.open .pipeline-widget-header{border-bottom-color:var(--border)}.pipeline-widget-header:hover{color:var(--text-primary)}.pipeline-widget-header .chevron{color:var(--text-secondary);font-size:.6rem}.pipeline-widget-body{min-height:0;overflow:auto}.widget-row{flex-shrink:0;gap:12px;margin-top:12px;display:flex}.widget{background:var(--bg-darker);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;min-width:0;padding:10px 12px;display:flex}.widget-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;font-size:.7rem}.widget-empty{color:var(--text-secondary);font-size:.8rem}.settings-grid,.stats-grid{flex-direction:column;gap:8px;display:flex}.settings-row,.stats-row{color:var(--text-primary);justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.stats-row>span:last-child{color:var(--text-secondary);font-family:JetBrains Mono,Fira Code,monospace}.entries-list{flex-direction:column;gap:4px;display:flex}.entry-row{color:var(--text-primary);align-items:center;gap:8px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;display:flex}.entry-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.entry-dot.vertex{background:#60a5fa}.entry-dot.fragment{background:var(--success)}.entry-dot.compute{background:#fbbf24}.header-controls{align-items:center;gap:12px;display:flex}.ctrl{color:var(--text-secondary);align-items:center;gap:6px;font-size:.75rem;display:flex}.ctrl-select{background:var(--bg-editor);color:var(--text-primary);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:2px 6px;font-family:inherit;font-size:.75rem}.ctrl-select:hover{border-color:var(--accent)}.tab-bar{background:var(--bg-darker);border-bottom:1px solid var(--border);padding:0 8px;display:flex}.tab{color:var(--text-secondary);cursor:pointer;border-bottom:2px solid #0000;padding:8px 16px;font-size:.8rem;transition:color .2s,border-color .2s}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-content{flex:1;display:none;overflow:auto}.tab-content.active{display:block}#output{white-space:pre-wrap;word-break:break-all;padding:12px 16px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}#output.error{color:var(--error)}#output.success{color:var(--success)}.error-item{border-left:3px solid var(--error);cursor:pointer;background:#f871711a;border-radius:0 4px 4px 0;margin:4px 0;padding:8px 12px;transition:background .2s}.error-item:hover{background:#f8717133}.error-item .error-location{color:var(--error);margin-bottom:4px;font-weight:600}.error-item .error-message{color:var(--text-primary)}.tree-container{padding:8px 12px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}.tree-node{margin-left:16px}.tree-node-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding:2px 0;display:flex}.tree-node-label:hover{background:#6366f11a}.tree-toggle{width:16px;height:16px;color:var(--text-secondary);justify-content:center;align-items:center;margin-right:4px;font-size:10px;display:inline-flex}.tree-toggle.expanded:before{content:"▼"}.tree-toggle.collapsed:before{content:"▶"}.tree-toggle.leaf{visibility:hidden}.tree-text{color:var(--text-primary)}.tree-type{color:var(--accent);opacity:.8;margin-left:8px}.tree-children{display:block}.tree-children.collapsed{display:none}.status{align-items:center;gap:8px;display:flex}.status-dot{background:var(--text-secondary);border-radius:50%;width:8px;height:8px}.status-dot.ready{background:var(--success)}.status-dot.error{background:var(--error)}.status-dot.compiling{background:var(--accent);animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fps{color:var(--text-secondary);background:#00000080;border-radius:4px;padding:4px 8px;font-size:.75rem;position:absolute;top:8px;right:8px}.loading-overlay{background:var(--bg-dark);z-index:1000;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.loading-overlay.hidden{display:none}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.landing{background:radial-gradient(circle at 20% 20%, #6366f159, transparent 55%), radial-gradient(circle at 80% 60%, #a855f74d, transparent 55%), radial-gradient(circle at 50% 100%, #ec489938, transparent 55%), var(--bg-dark);flex:1;position:relative;overflow:hidden auto}.landing-bg{z-index:0;width:100%;height:100%;display:block;position:fixed;inset:0}.landing-overlay{z-index:1;pointer-events:none;background:linear-gradient(#0f0f1a59 0%,#0f0f1a8c 100%),radial-gradient(#0000 0%,#0f0f1a73 80%);position:fixed;inset:0}.landing-hero{z-index:2;text-align:center;max-width:880px;margin:0 auto;padding:112px 32px 96px;position:relative}.landing-eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--text-secondary);border:1px solid var(--border);background:#ffffff08;border-radius:999px;margin-bottom:28px;padding:4px 12px;font-size:.75rem;display:inline-block}.landing-title{letter-spacing:-.02em;color:var(--text-primary);margin-bottom:24px;font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700;line-height:1.1}.landing-title-accent{background:linear-gradient(135deg, #a5b4fc, var(--accent) 45%, #a855f7 80%, #ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Lobster,cursive;font-weight:400}.landing-tagline{color:var(--text-secondary);max-width:620px;margin:0 auto 40px;font-size:1.125rem;line-height:1.6}.landing-cta-row{flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:20px;display:flex}.landing-cta{border-radius:8px;justify-content:center;align-items:center;padding:14px 28px;font-size:1rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,transform .1s,box-shadow .2s;display:inline-flex}.landing-cta-primary{background:linear-gradient(135deg, var(--accent), #a855f7);color:#fff;box-shadow:0 6px 20px #6366f159}.landing-cta-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px #6366f180}.landing-cta-secondary{color:var(--text-primary);border:1px solid var(--border);background:#ffffff0f}.landing-cta-secondary:hover{border-color:var(--accent);background:#ffffff1a}.landing-note{color:var(--text-secondary);opacity:.7;font-size:.85rem}.landing-featured{max-width:520px;color:inherit;margin:0 auto 24px;text-decoration:none;display:block}.landing-featured-eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--text-secondary);text-align:left;margin-bottom:8px;font-size:.7rem}.landing-featured-card{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);background:#16162ab3;border-radius:12px;align-items:center;gap:14px;padding:10px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex}.landing-featured:hover .landing-featured-card{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 22px #6366f140}.landing-featured-thumb{object-fit:cover;border-radius:6px;flex-shrink:0;width:96px;height:54px}.landing-featured-thumb-empty{background:linear-gradient(135deg, var(--accent) 0%, #a855f7 100%)}.landing-featured-meta{text-align:left;flex:1;min-width:0}.landing-featured-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;overflow:hidden}.landing-featured-slug{color:var(--text-secondary);margin-top:2px;font-family:JetBrains Mono,monospace;font-size:.72rem}.landing-featured-arrow{color:var(--text-secondary);flex-shrink:0;font-size:1.2rem;transition:color .2s,transform .2s}.landing-featured:hover .landing-featured-arrow{color:var(--accent);transform:translate(2px)}.landing-features{z-index:2;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1040px;margin:0 auto;padding:48px 32px 120px;display:grid;position:relative}.landing-feature{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);background:#16162ab3;border-radius:12px;padding:28px 24px;transition:border-color .2s,transform .2s}.landing-feature:hover{border-color:var(--accent);transform:translateY(-2px)}.landing-feature-icon{margin-bottom:12px;font-size:1.75rem}.landing-feature h3{color:var(--text-primary);margin-bottom:8px;font-size:1.05rem;font-weight:600}.landing-feature p{color:var(--text-secondary);font-size:.9rem;line-height:1.55}.user-page{background:radial-gradient(circle at 85% -10%, #a855f72e, transparent 55%), radial-gradient(circle at 15% 110%, #6366f124, transparent 55%), var(--bg-dark);flex:1;padding:48px 32px 96px;overflow:hidden auto}.user-hero{align-items:center;gap:20px;max-width:1040px;margin:0 auto 40px;display:flex}.user-hero-avatar{border:2px solid var(--border);border-radius:50%;width:72px;height:72px}.user-hero-text{flex:1;min-width:0}.user-hero-eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--text-secondary);margin-bottom:4px;font-size:.75rem}.user-hero-title{letter-spacing:-.01em;color:var(--text-primary);font-size:1.9rem;font-weight:700;line-height:1.1}.user-hero-count{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.user-hero-cta{background:var(--accent);color:#fff;border-radius:6px;align-items:center;padding:10px 16px;font-size:.9rem;font-weight:500;text-decoration:none;transition:background .2s,transform .1s;display:inline-flex}.user-hero-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}.shader-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1040px;margin:0 auto;padding:0;list-style:none;display:grid}.shader-grid>li{display:block}.shader-card{border:1px solid var(--border);color:inherit;background:#16162acc;border-radius:12px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;display:block;overflow:hidden}.shader-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 28px #6366f140}.shader-cover{aspect-ratio:16/9;position:relative;overflow:hidden}.shader-cover-img{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.shader-cover:after{content:"";pointer-events:none;background:radial-gradient(#0000 60%,#00000059 100%),repeating-linear-gradient(0deg,#0000 0 2px,#ffffff04 2px 3px);position:absolute;inset:0}.shader-cover-slug{letter-spacing:.04em;color:#ffffffd9;-webkit-backdrop-filter:blur(4px);z-index:1;background:#00000059;border-radius:4px;padding:3px 8px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.72rem;position:absolute;bottom:10px;left:12px}.shader-card-body{padding:14px 16px 16px}.shader-card-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px;font-size:.95rem;font-weight:600;overflow:hidden}.shader-card-meta{grid-template-columns:1fr 1fr;gap:10px;margin:0;display:grid}.shader-card-meta>div{min-width:0}.shader-card-meta dt{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:2px;font-size:.65rem}.shader-card-meta dd{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.78rem;overflow:hidden}.user-empty{text-align:center;border:1px dashed var(--border);background:#16162a99;border-radius:12px;max-width:520px;margin:64px auto 0;padding:48px 32px}.user-empty-icon{margin-bottom:12px;font-size:2.5rem}.user-empty h2{color:var(--text-primary);margin-bottom:8px;font-size:1.25rem;font-weight:600}.user-empty p{color:var(--text-secondary);margin-bottom:20px;font-size:.9rem;line-height:1.55}.user-empty-cta{background:var(--accent);color:#fff;border-radius:6px;align-items:center;padding:10px 18px;font-size:.9rem;font-weight:500;text-decoration:none;transition:background .2s;display:inline-flex}.user-empty-cta:hover{background:var(--accent-hover)}