:root{--bg-primary: #1e1e1e;--bg-secondary: #252526;--bg-tertiary: #2d2d30;--text-primary: #d4d4d4;--text-secondary: #808080;--accent: #569cd6;--accent-hover: #4fc3f7;--success: #4ec9b0;--error: #f44747;--warning: #dcdcaa;--border: #3c3c3c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}body.page-playground,body.page-playground .app{height:100vh;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border)}.logo h1{font-size:1.5rem;font-weight:600;color:var(--accent);margin:0}.logo .tagline{font-size:.75rem;color:var(--text-secondary);margin-left:.5rem}.nav{display:flex;gap:1.5rem}.nav a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:color .2s}.nav a:hover,.nav a.active{color:var(--text-primary)}.toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border)}.toolbar-separator{width:1px;height:1.5rem;background-color:var(--border)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .2s}.btn-primary{background-color:var(--accent);color:#fff}.btn-primary:hover{background-color:var(--accent-hover)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background-color:var(--border)}.btn-small{padding:.25rem .5rem;font-size:.75rem;background-color:var(--bg-tertiary);color:var(--text-secondary)}.btn-small:hover{background-color:var(--border);color:var(--text-primary)}.select{padding:.5rem;background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;font-size:.9rem;cursor:pointer}.status{margin-left:auto;font-size:.85rem;color:var(--text-secondary);white-space:nowrap}.status.running{color:var(--warning)}.status.success{color:var(--success)}.status.error{color:var(--error)}.project-group{display:flex;align-items:center;gap:.25rem}.project-group .select{max-width:200px}.playground{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.editor-container{flex:1;display:flex;min-height:0;overflow:hidden}.panel{display:flex;flex-direction:column;background-color:var(--bg-primary);min-height:0;overflow:hidden}.editor-panel{flex:1;min-width:0}.output-panel{width:40%;min-width:200px;flex-shrink:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background-color:var(--bg-tertiary);font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.editor{flex:1;min-height:0}.divider{width:5px;cursor:col-resize;background-color:var(--border);flex-shrink:0;transition:background-color .15s}.divider:hover,.divider.dragging{background-color:var(--accent)}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.output-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.output{flex:1;margin:0;padding:1rem;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.9rem;line-height:1.5;overflow:auto;white-space:pre-wrap;word-wrap:break-word}.output .error{color:var(--error)}.output .success{color:var(--success)}.errors-panel{display:flex;flex-direction:column;max-height:200px;border-top:1px solid var(--error);background-color:var(--bg-secondary);flex-shrink:0}.errors-panel[hidden]{display:none}.errors-header{display:flex;justify-content:space-between;align-items:center;padding:.35rem 1rem;background-color:#3c1a1a;font-size:.85rem;color:var(--error);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.errors-content{margin:0;padding:.5rem 1rem;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.85rem;line-height:1.5;color:var(--error);overflow:auto}.errors-content .error-line{cursor:pointer;padding:1px 4px;border-radius:2px}.errors-content .error-line:hover{background-color:#f4474726;text-decoration:underline}.gl-canvas{display:none;width:100%;background:#000}.output-container.webgl-mode .gl-canvas{display:block;flex:2;min-height:300px}.output-container.webgl-mode .output{flex:0 0 auto;max-height:120px;border-top:1px solid var(--border)}.footer{padding:.75rem 2rem;background-color:var(--bg-secondary);border-top:1px solid var(--border);text-align:center;font-size:.8rem;color:var(--text-secondary)}@media (max-width: 768px){.editor-container{flex-direction:column}.divider{display:none}.output-panel{width:100%!important;min-height:200px}.editor-panel{flex:none!important;width:100%!important;min-height:300px}.header{flex-direction:column;gap:1rem}.toolbar,.project-group{flex-wrap:wrap}.project-group .select{max-width:150px}.gl-canvas{min-height:300px}}body.page-docs,body.page-docs .app{height:100vh;overflow:hidden}.docs{flex:1;display:flex;min-height:0;overflow:hidden}.docs-sidebar{width:240px;flex-shrink:0;overflow-y:auto;background-color:var(--bg-secondary);border-right:1px solid var(--border);padding:.75rem 0 2rem}.docs-group{padding:1.25rem 1rem .35rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.docs-group:first-child{padding-top:.5rem}.docs-sidebar a{display:block;padding:.25rem 1rem .25rem 1.25rem;font-size:.85rem;color:var(--text-secondary);text-decoration:none;border-left:3px solid transparent;transition:background-color .15s,color .15s}.docs-sidebar a:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.docs-content{flex:1;overflow-y:auto;padding:2rem 3rem 4rem}.docs-section{margin-bottom:3rem;max-width:780px}.docs-section h2{color:var(--accent);font-size:1.6rem;border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:1rem}.docs-section h3{color:var(--text-primary);font-size:1.15rem;margin-top:2rem;margin-bottom:.5rem}.docs-section h4{color:var(--text-primary);font-size:1rem;margin-top:1.5rem;margin-bottom:.35rem}.docs-section p{line-height:1.7;margin-bottom:1rem}.docs-section code{background-color:var(--bg-tertiary);padding:.2rem .4rem;border-radius:3px;font-family:Fira Code,Consolas,monospace;font-size:.88em}.docs-section pre{background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;padding:1rem 1.25rem;overflow-x:auto;margin-bottom:1rem;font-size:.88rem;line-height:1.55}.docs-section pre code{background:none;padding:0}.docs-section ul,.docs-section ol{margin-left:1.5rem;margin-bottom:1rem;line-height:1.7}.docs-section table{width:100%;border-collapse:collapse;margin-bottom:1rem}.docs-section th,.docs-section td{border:1px solid var(--border);padding:.5rem .75rem;text-align:left}.docs-section th{background-color:var(--bg-tertiary);color:var(--text-primary);font-weight:600}.docs-section td{color:var(--text-secondary)}.docs-section td code{font-size:.85em}@media (max-width: 768px){.docs{flex-direction:column}.docs-sidebar{display:none}.docs-content{padding:1.5rem}}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.page-content{flex:1;overflow-y:auto}.page-container{max-width:860px;margin:0 auto;padding:3rem 2rem 4rem}.page-title{font-size:2rem;font-weight:600;color:var(--accent);margin-bottom:.5rem}.page-intro{font-size:1.1rem;line-height:1.7;color:var(--text-secondary);margin-bottom:2.5rem}.landing{flex:1;overflow-y:auto}.hero{text-align:center;padding:5rem 2rem 2rem;max-width:720px;margin:0 auto}.hero-title{font-size:2.8rem;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:1.25rem}.hero-subtitle{font-size:1.15rem;line-height:1.7;color:var(--text-secondary);margin-bottom:2.5rem}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn-large{padding:.75rem 2rem;font-size:1rem;border-radius:6px}.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-outline:hover{background-color:#569cd61a}.hero-code{max-width:560px;margin:3rem auto 4rem;padding:0 2rem}.code-preview{background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:1.5rem;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.9rem;line-height:1.6;overflow-x:auto}.code-preview .kw{color:#569cd6}.code-preview .fn{color:#dcdcaa}.code-preview .tp{color:#4ec9b0}.code-preview .num{color:#b5cea8}.code-preview .str{color:#ce9178}.code-preview .cm{color:#6a9955}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;max-width:960px;margin:0 auto;padding:0 2rem 4rem}.feature{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1.5rem}.feature h3{color:var(--accent);font-size:1.1rem;margin-bottom:.5rem}.feature p{color:var(--text-secondary);line-height:1.6;font-size:.9rem}.feature code{background-color:var(--bg-tertiary);padding:.15rem .35rem;border-radius:3px;font-family:Fira Code,Consolas,monospace;font-size:.85em}.cta{text-align:center;padding:3rem 2rem 4rem;border-top:1px solid var(--border)}.cta h3{font-size:1.5rem;color:var(--text-primary);margin-bottom:.5rem}.cta p{color:var(--text-secondary);margin-bottom:2rem}.dl-section{margin-bottom:2.5rem}.dl-section h3{font-size:1.25rem;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.dl-section p{line-height:1.6;margin-bottom:.75rem;color:var(--text-secondary)}.dl-section a{color:var(--accent);text-decoration:none}.dl-section a:hover{text-decoration:underline}.dl-section code{background-color:var(--bg-tertiary);padding:.15rem .35rem;border-radius:3px;font-family:Fira Code,Consolas,monospace;font-size:.9em}.dl-card{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:1rem}.dl-card-header{padding:.5rem 1rem;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border)}.dl-platform{font-size:.85rem;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.04em}.dl-code{margin:0;padding:1rem;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.85rem;line-height:1.6;overflow-x:auto}.dl-note{padding:.5rem 1rem .75rem;font-size:.85rem;color:var(--text-secondary);margin:0}.dl-requirements{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.dl-req{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:1rem}.dl-req h4{color:var(--text-primary);font-size:.95rem;margin-bottom:.35rem}.dl-req p{font-size:.85rem;margin:0}body.page-tutorial,body.page-tutorial .app{height:100vh;overflow:hidden}.tutorial{flex:1;display:flex;min-height:0;overflow:hidden}.tutorial-sidebar{width:200px;flex-shrink:0;background-color:var(--bg-secondary);border-right:1px solid var(--border);overflow-y:auto;padding:1rem 0}.tutorial-sidebar-title{padding:0 1rem .75rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.lesson-list{list-style:none;margin:0;padding:0;counter-reset:lesson}.lesson-item{counter-increment:lesson;padding:.5rem 1rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer;border-left:3px solid transparent;transition:background-color .15s,color .15s}.lesson-item:before{content:counter(lesson) ". ";color:var(--text-secondary)}.lesson-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.lesson-item.active{color:var(--text-primary);background-color:var(--bg-tertiary);border-left-color:var(--accent)}.lesson-item.active:before{color:var(--accent)}.tutorial-left{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.tutorial-content{flex:1;overflow-y:auto;padding:2rem 2.5rem}.lesson-header{margin-bottom:1.25rem}.lesson-number{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.lesson-title{font-size:1.75rem;font-weight:600;color:var(--accent);margin-top:.25rem}.lesson-body{line-height:1.7;color:var(--text-primary)}.lesson-body p{margin-bottom:.75rem}.lesson-body h4{color:var(--text-primary);margin-top:1.25rem;margin-bottom:.35rem}.lesson-body ul{margin:.5rem 0 .75rem 1.5rem;line-height:1.7}.lesson-body code{background-color:var(--bg-tertiary);padding:.15rem .4rem;border-radius:3px;font-family:Fira Code,Consolas,monospace;font-size:.88em}.lesson-body pre{background-color:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;padding:.75rem 1rem;margin:.5rem 0 .75rem;overflow-x:auto;font-size:.88rem;line-height:1.5}.lesson-body pre code{background:none;padding:0}.tutorial-nav{display:flex;justify-content:space-between;padding:.75rem 1rem;background-color:var(--bg-secondary);border-top:1px solid var(--border);flex-shrink:0}.tutorial-nav .btn{min-width:110px;justify-content:center}.tutorial-nav .btn:disabled{opacity:.4;cursor:default}.tutorial-right{width:45%;min-width:300px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--border)}.tutorial-editor-header,.tutorial-output-header{display:flex;justify-content:space-between;align-items:center;padding:.35rem 1rem;background-color:var(--bg-tertiary);font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.tutorial-editor-actions{display:flex;gap:.5rem}.tutorial-editor{flex:1;min-height:0}.tutorial-output-header{border-top:1px solid var(--border)}.tutorial-output{height:120px;flex-shrink:0;margin:0;padding:.5rem 1rem;font-family:Fira Code,Consolas,Monaco,monospace;font-size:.85rem;line-height:1.4;overflow:auto;background-color:var(--bg-primary);color:var(--text-primary)}@media (max-width: 768px){.tutorial{flex-direction:column}.tutorial-sidebar{display:none}.tutorial-left{flex:none;max-height:50%}.tutorial-right{width:100%;min-width:0;flex:1;border-left:none;border-top:1px solid var(--border)}.tutorial-content{padding:1.5rem}}