:root{--bg:#000;--bg-2:#080808;--bg-3:#0f0f0f;--surface:#111;--surface-2:#1a1a1a;--border:#ffffff14;--border-hover:#ffffff26;--text:#f0f0ff;--text-2:#9090b8;--text-3:#5a5a88;--accent:#7c5cfc;--accent-2:#c45cfc;--accent-glow:#7c5cfc59;--cyan:#5cf4fc;--cyan-glow:#5cf4fc40;--pink:#fc5cb8;--green:#5cfca8;--radius:12px;--radius-lg:20px;--radius-full:9999px;--font:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace;--slide-height:100svh;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;cursor:none;background:#000;overflow:hidden}.scroll-container{scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;height:100svh;overflow-y:scroll}.scroll-container::-webkit-scrollbar{display:none}.slide{scroll-snap-align:start;scroll-snap-stop:always;flex-direction:column;height:100svh;display:flex;position:relative;overflow:hidden}*{cursor:none!important}.btn{border-radius:var(--radius);font-family:var(--font);letter-spacing:.02em;transition:var(--transition);white-space:nowrap;border:none;align-items:center;gap:8px;padding:10px 22px;font-size:14px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;background:#ffffff14;transition:opacity .2s;position:absolute;inset:0}.btn:hover:before{opacity:1}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 4px 20px var(--accent-glow)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 30px #7c5cfc8c}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-hover)}.btn-secondary:hover{background:var(--surface-2);border-color:var(--accent)}.btn-ghost{color:var(--text-2);border:1px solid var(--border);background:0 0}.btn-ghost:hover{color:var(--text);border-color:var(--border-hover);background:#ffffff0a}.btn-code{background:var(--surface);color:var(--cyan);font-family:var(--font-mono);border:1px solid #5cf4fc33;font-size:13px}.btn-code:hover{border-color:var(--cyan);box-shadow:0 0 20px var(--cyan-glow);background:#5cf4fc14}.btn-prompt{background:var(--surface);color:var(--accent-2);border:1px solid #c45cfc33;font-size:13px}.btn-prompt:hover{border-color:var(--accent-2);background:#c45cfc14;box-shadow:0 0 20px #c45cfc4d}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);padding:24px}.card:hover{border-color:var(--border-hover);background:var(--surface-2);transform:translateY(-2px);box-shadow:0 12px 40px #0006}.cm-overlay{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:1000;background:#000000e0;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.cm-modal{background:var(--bg-2);border-radius:var(--radius-lg);border:1px solid #ffffff1a;flex-direction:column;width:84vw;max-width:1280px;height:80vh;animation:.25s cubic-bezier(.34,1.56,.64,1) cmSlideUp;display:flex;overflow:hidden}@keyframes cmSlideUp{0%{opacity:0;transform:translateY(18px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.cm-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;min-height:0;padding:14px 20px;display:flex}.cm-body{flex-direction:column;flex:1;min-height:0;padding:16px;display:flex;overflow:hidden}.cm-section{border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.cm-section-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:9px 14px;display:flex}.cm-section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-size:11px;font-weight:700}.cm-section-body{scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent;flex:1;min-height:0;overflow:auto}.cm-section-code{font-family:var(--font-mono);color:#c9d1d9;white-space:pre;background:#000;padding:16px 20px;font-size:12.5px;line-height:1.75}.cm-section-text{background:var(--bg);color:var(--text-2);border-left:2px solid #c45cfc40;padding:16px 20px;font-size:13.5px;line-height:1.8}.cm-two-pane{flex:1;grid-template-columns:1fr 1fr;gap:12px;min-height:0;display:grid}.copy-btn{background:var(--surface);border:1px solid var(--border-hover);color:var(--text-2);font-size:11px;font-family:var(--font);transition:var(--transition);border-radius:6px;flex-shrink:0;padding:4px 10px}.copy-btn:hover{color:var(--text);border-color:var(--accent)}.copy-btn.copied{color:var(--green);border-color:var(--green)}.modal-tabs{background:var(--bg);border-radius:var(--radius);gap:4px;padding:4px;display:flex}.modal-tab{color:var(--text-3);transition:var(--transition);background:0 0;border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:500}.modal-tab.active{background:var(--surface);color:var(--text)}.modal-close{background:var(--surface);border:1px solid var(--border);color:var(--text-2);width:32px;height:32px;transition:var(--transition);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;line-height:1;display:flex}.modal-close:hover{color:var(--text);border-color:var(--border-hover);background:var(--surface-2)}.side-nav{z-index:100;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;top:50%;right:20px;transform:translateY(-50%)}.side-nav-dot{border-radius:var(--radius-full);background:var(--text-3);border:none;width:6px;height:6px;transition:all .3s;position:relative}.side-nav-dot:before{content:attr(data-label);background:var(--surface);border:1px solid var(--border-hover);color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:500;transition:opacity .2s;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.side-nav-dot:hover:before{opacity:1}.side-nav-dot.active{background:linear-gradient(180deg, var(--accent), var(--accent-2));width:8px;height:24px;box-shadow:0 0 10px var(--accent-glow)}.tag{border-radius:var(--radius-full);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:#7c5cfc1f;border:1px solid #7c5cfc40;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.gradient-text{background:linear-gradient(135deg, var(--cyan) 0%, var(--accent) 50%, var(--accent-2) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hoverable-text{color:var(--text-2);font-size:15px;line-height:1.8;transition:color .2s}.hoverable-text:hover{color:var(--text)}.hero-slide{background:var(--bg);box-sizing:border-box;flex-direction:row;width:100vw;height:100vh;display:flex;overflow:hidden}.hero-left{text-align:center;z-index:2;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;width:38%;min-width:360px;padding:64px;display:flex}.hero-brand{flex-direction:column;align-items:center;gap:16px;margin-bottom:24px;display:flex}.hero-badge{border-radius:var(--radius-full);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:#7c5cfc1a;border:1px solid #7c5cfc33;align-items:center;gap:8px;padding:6px 14px;font-size:12px;font-weight:600;display:inline-flex}.hero-badge-dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.hero-title{letter-spacing:-.03em;margin-bottom:16px;font-size:clamp(38px,5vw,68px);font-weight:900;line-height:1.05}.hero-sub{color:var(--text-2);font-size:16px;line-height:1.6}.hero-right{z-index:2;box-sizing:border-box;flex:1;align-items:center;padding:64px;display:flex;overflow:hidden}.hero-gallery-section{box-sizing:border-box;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(145deg,#ffffff08 0%,#ffffff01 60%,#00000040 100%);border:1px solid #ffffff12;border-radius:28px;width:100%;height:100%;max-height:calc(100vh - 128px);overflow:hidden;box-shadow:inset 0 1px #ffffff26,inset 0 -1px #0006,0 24px 64px #00000073}.hero-gallery-scroll{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#7c5cfc59 #00000026;width:100%;height:100%;padding:36px;overflow-y:auto}.hero-gallery-scroll::-webkit-scrollbar{width:12px}.hero-gallery-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#7c5cfc59 0%,#5cf4fc59 100%) padding-box padding-box;border:3px solid #0000;border-radius:10px}.hero-gallery-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(#7c5cfc8c 0%,#5cf4fc8c 100%) padding-box padding-box;border:3px solid #0000;border-radius:10px}.hero-gallery-scroll::-webkit-scrollbar-track{background:#00000026 padding-box padding-box;border:3px solid #0000;border-radius:10px}.hero-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}@media (width<=1200px){.hero-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=1024px){.hero-slide{flex-direction:column;overflow-y:auto}.hero-left{width:100%;min-width:0;padding:48px 32px 24px}.hero-right{width:100%;padding:0 32px 48px;overflow-y:visible}.hero-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.hero-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.hero-grid{grid-template-columns:1fr}}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:140px;padding:32px 20px;transition:all .25s;display:flex;position:relative;overflow:hidden}.hero-card:before{content:"";background:linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);opacity:0;transition:opacity .3s;position:absolute;inset:0}.hero-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 40px #00000080,0 0 0 1px #7c5cfc26}.hero-card:hover:before{opacity:1}.hero-card-num-bg{font-family:var(--font-mono);color:var(--text);opacity:.02;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:72px;font-weight:900;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-card:hover .hero-card-num-bg{opacity:.06;color:var(--card-accent);transform:translate(-50%,-50%)scale(1.1)}.hero-card-name{color:var(--text);z-index:1;font-size:15px;font-weight:700;position:relative}.hero-card-desc{color:var(--text-3);z-index:1;font-size:12px;line-height:1.5;position:relative}.cursor-slide{grid-template-rows:auto 1fr auto;height:100svh;display:grid;position:relative}.cursor-slide-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:32px 64px 0;display:flex}.cursor-slide-meta{flex-direction:column;gap:6px;display:flex}.cursor-slide-number{font-family:var(--font-mono);color:var(--text-3);font-size:11px;font-weight:500}.cursor-slide-name{letter-spacing:-.02em;font-size:28px;font-weight:800}.cursor-slide-desc{color:var(--text-2);margin-top:4px;font-size:14px}.cursor-slide-actions{gap:10px;display:flex}.demo-area{grid-template-columns:1fr 340px;align-items:center;gap:20px;min-height:0;padding:24px 64px;display:grid}.demo-canvas-area{border:1px solid var(--border);border-radius:var(--radius-lg);background:#000;flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.demo-canvas-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:10px;font-weight:600;position:absolute;top:16px;left:16px}.demo-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.demo-buttons .btn{text-align:center;flex:1;justify-content:center;min-width:0}.demo-text{color:var(--text-2);text-align:center;max-width:380px;padding:0 16px;font-size:14px;line-height:1.7}.demo-text strong{color:var(--text)}.demo-sidebar{flex-direction:column;gap:14px;height:100%;min-height:0;display:flex}.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex:1;padding:20px;transition:all .25s}.demo-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 30px #0000004d}.demo-card h4{color:var(--text);margin-bottom:8px;font-size:13px;font-weight:700}.demo-card p{color:var(--text-3);font-size:12px;line-height:1.6}.demo-card-icon{margin-bottom:10px;font-size:22px}.demo-drag-zone{border:1px dashed var(--border-hover);border-radius:var(--radius);text-align:center;color:var(--text-3);background:#ffffff08;padding:16px;font-size:12px;transition:all .2s}.demo-drag-zone:hover{border-color:var(--accent);color:var(--accent);background:#7c5cfc0d}.demo-hint{border-radius:var(--radius-full);color:var(--text-3);white-space:nowrap;pointer-events:none;z-index:20;background:#7c5cfc14;border:1px solid #7c5cfc2e;padding:5px 14px;font-size:11px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.config-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:4px;height:100%;min-height:0;padding:20px;display:flex;overflow-y:auto}.config-panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;display:flex}.config-panel-title{text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);font-size:11px;font-weight:700}.config-row{border-bottom:1px solid var(--border);padding:10px 0}.config-row--toggle,.config-row--color{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.config-row:last-child,.config-row--toggle:last-child,.config-row--color:last-child{border-bottom:none}.config-row-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.config-label{color:var(--text-2);font-size:12px;font-weight:600}.config-value{font-size:11px;font-family:var(--font-mono);color:var(--accent)}.config-slider{appearance:none;background:var(--surface-2);border-radius:2px;outline:none;width:100%;height:4px}.config-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);width:14px;height:14px;box-shadow:0 0 6px var(--accent-glow);cursor:none;border-radius:50%}.config-color-wrap{align-items:center;gap:10px;display:flex}.config-color{border:1px solid var(--border-hover);cursor:none;background:0 0;border-radius:6px;width:36px;height:28px;padding:2px}.config-color-hex{font-size:12px;font-family:var(--font-mono);color:var(--text-2)}.config-text-input{background:var(--bg-2);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-mono);border-radius:8px;outline:none;padding:7px 10px;font-size:12px;transition:border-color .2s}.config-text-input:focus{border-color:var(--accent)}.config-reset{color:var(--text-3);border:1px solid var(--border);border-radius:var(--radius-full);font-size:11px;font-family:var(--font);cursor:none;background:0 0;margin-top:10px;padding:4px 10px;transition:all .2s}.config-reset:hover{color:var(--text);border-color:var(--border-hover)}.config-chip{font-size:11px;font-family:var(--font-mono);color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-full);align-items:center;gap:4px;padding:3px 10px;display:inline-flex}.cursor-slide-footer{border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 64px 24px;display:flex}.slide-nav-arrows{gap:8px;display:flex}.slide-nav-btn{background:var(--surface);border:1px solid var(--border);width:36px;height:36px;color:var(--text-2);transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.slide-nav-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent);color:var(--text)}.slide-nav-btn:disabled{opacity:.3}.back-to-index{color:var(--text-3);font-size:12px;font-family:var(--font);background:0 0;border:none;align-items:center;gap:6px;text-decoration:none;transition:color .2s;display:flex}.back-to-index:hover{color:var(--text)}.progress-bar{background:var(--surface);border-radius:1px;flex:1;height:2px;margin:0 20px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:1px;height:100%;transition:width .4s}.tok-kw{color:#ff7b72}.tok-fn{color:#d2a8ff}.tok-str{color:#a5d6ff}.tok-cmt{color:#6e7681;font-style:italic}.tok-num{color:#79c0ff}.tok-prop{color:#ffa657}.tok-punct{color:#8b949e}.demo-input-section{border:1px solid var(--border);border-radius:var(--radius);z-index:15;background:#ffffff08;flex-direction:column;gap:10px;width:calc(100% - 40px);padding:14px 16px;display:flex;position:relative}.demo-input-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);font-size:10px;font-weight:700}.demo-input-row{align-items:center;gap:8px;display:flex}.demo-input-wrap{flex:1;min-width:0;position:relative}.demo-select-wrap{flex:.85}.demo-field{background:var(--bg);border:1px solid var(--border);width:100%;font-family:var(--font);color:var(--text);appearance:none;border-radius:8px;outline:none;padding:8px 12px;font-size:12.5px;transition:border-color .2s,box-shadow .2s;cursor:none!important}.demo-field::placeholder{color:var(--text-3)}.demo-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#7c5cfc0a}.demo-field:hover:not(:focus){border-color:var(--border-hover)}.demo-field[type=search]::-webkit-search-cancel-button{display:none}.demo-field[type=search]::-webkit-search-decoration{display:none}.demo-select-wrap:after{content:"›";color:var(--text-3);pointer-events:none;font-size:14px;position:absolute;top:50%;right:10px;transform:translateY(-50%)rotate(90deg)}.demo-select{padding-right:28px}.demo-select option{color:var(--text);background:#111}.demo-check-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}.demo-check-label{color:var(--text-2);-webkit-user-select:none;user-select:none;align-items:center;gap:7px;font-size:12px;transition:color .18s;display:inline-flex;cursor:none!important}.demo-check-label:hover{color:var(--text)}.demo-check{opacity:0;width:0;height:0;position:absolute}.demo-check-box{border:1.5px solid var(--border-hover);background:var(--bg);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:15px;height:15px;transition:border-color .18s,background .18s,box-shadow .18s;display:inline-flex}.demo-check-box--radio{border-radius:50%}.demo-check:checked+.demo-check-box{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.demo-check:checked+.demo-check-box:after{content:"";background:#fff;border-radius:1px;width:5px;height:5px;display:block}.demo-check:checked+.demo-check-box--radio:after{border-radius:50%}.demo-check-label:hover .demo-check-box{border-color:var(--accent)}.demo-custom-select{-webkit-user-select:none;user-select:none;z-index:20;width:100%;position:relative;cursor:none!important}.demo-custom-select-trigger{background:var(--bg);border:1px solid var(--border);font-family:var(--font);color:var(--text);border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12.5px;transition:border-color .2s,box-shadow .2s;display:flex;cursor:none!important}.demo-custom-select-trigger:hover{border-color:var(--border-hover)}.demo-custom-select.open .demo-custom-select-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#7c5cfc0a}.demo-custom-select-arrow{color:var(--text-3);font-size:14px;line-height:1;transition:transform .2s;display:inline-block}.demo-custom-select.open .demo-custom-select-arrow{transform:rotate(90deg)}.demo-custom-select-menu{background:var(--surface);border:1px solid var(--border-hover);border-radius:8px;animation:.14s cmSlideUp;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 24px #00000080;cursor:none!important}.demo-custom-select-option{color:var(--text-2);padding:8px 12px;font-size:12.5px;transition:background .13s,color .13s;cursor:none!important}.demo-custom-select-option:hover{color:var(--text);background:#7c5cfc1f}.demo-custom-select-option.selected{color:var(--accent);background:#7c5cfc14}.demo-custom-select{z-index:50}.demo-custom-select-menu{z-index:55}.demo-canvas-label{z-index:60;position:relative}.demo-hint{z-index:60}.config-toggle-label{align-items:center;gap:10px;padding:2px 0;display:inline-flex;cursor:none!important}.config-toggle-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.config-toggle-track{background:var(--surface-2);border:1.5px solid var(--border-hover);border-radius:10px;flex-shrink:0;width:36px;height:20px;transition:background .2s,border-color .2s,box-shadow .2s;position:relative}.config-toggle-input:checked+.config-toggle-track{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.config-toggle-thumb{background:#ffffff8c;border-radius:50%;width:14px;height:14px;transition:transform .2s,background .2s;position:absolute;top:2px;left:2px}.config-toggle-input:checked+.config-toggle-track .config-toggle-thumb{background:#fff;transform:translate(16px)}.config-toggle-text{color:var(--text-3);letter-spacing:.05em;min-width:20px;font-size:11px;font-weight:500}.config-toggle-input:checked~.config-toggle-text{color:var(--accent)}