/*!
 * SR-DevBox 开发者效率工具箱
 *
 * @author     Zhu Rui
 * @website    https://srdevbox.com
 * @email      30501250@qq.com
 * @copyright  © 2026 Zhu Rui. All Rights Reserved.
 *
 * 本文件及其相关代码为 SR-DevBox 项目的组成部分，版权归作者 Zhu Rui 所有。
 * 未经书面许可，禁止以任何形式复制、修改、分发或用于商业目的。
 *
 * This file is part of the SR-DevBox project.
 * Copyright (c) 2026 Zhu Rui. All rights reserved.
 * Unauthorized copying, modification, distribution, or commercial use is prohibited.
 */:root{--bg-color: #030309;--glass-blur: 24px;--glass-opacity: .45;--panel-bg: rgba(11, 11, 20, var(--glass-opacity));--panel-border: rgba(255, 255, 255, .08);--primary-rgb: 0, 240, 255;--secondary-rgb: 255, 0, 127;--accent-rgb: 121, 40, 202;--gold-rgb: 255, 215, 0;--emerald-rgb: 0, 223, 137;--primary: rgb(var(--primary-rgb));--secondary: rgb(var(--secondary-rgb));--accent: rgb(var(--accent-rgb));--gold: rgb(var(--gold-rgb));--emerald: rgb(var(--emerald-rgb));--font-title: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace}.section{--theme-rgb: var(--primary-rgb)}.section:nth-of-type(1){--theme-rgb: var(--primary-rgb)}.section:nth-of-type(2){--theme-rgb: var(--emerald-rgb)}.section:nth-of-type(3){--theme-rgb: var(--accent-rgb)}.section:nth-of-type(4){--theme-rgb: var(--secondary-rgb)}.section:nth-of-type(5){--theme-rgb: var(--gold-rgb)}.section:nth-of-type(6){--theme-rgb: 255, 240, 50}*{margin:0;padding:0;box-sizing:border-box}button,.preset-btn-mini,.card-action-btn,.nav-link-item,.btn-copy-code,.sound-toggle-btn,.switcher-trigger,.switcher-item{cursor:pointer!important;user-select:none;-webkit-user-select:none}html,body{width:100%;min-height:100%;background-color:transparent;color:#f3f4f6;font-family:var(--font-title);overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}#webgl-canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-10;background-color:var(--bg-color);pointer-events:none}#webgl-canvas{width:100%;height:100%;display:block;pointer-events:auto}.overlay-grid{position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.25) 50%),linear-gradient(90deg,rgba(255,0,0,.03),rgba(0,255,0,.01),rgba(0,255,0,.03));background-size:100% 4px,6px 100%;z-index:-2;pointer-events:none;opacity:.4}.tech-grid{position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 0),radial-gradient(rgba(255,255,255,.05) 1px,transparent 0);background-size:60px 60px;background-position:0 0,30px 30px;z-index:-1;pointer-events:none;opacity:.25}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary);box-shadow:0 0 8px var(--primary)}.hud-header{position:fixed;top:20px;left:50%;transform:translate(-50%);width:90%;max-width:1000px;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;z-index:100;background:rgba(11,11,20,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.08);border-radius:30px;box-shadow:0 12px 40px #00000080,0 0 24px #00f0ff0a;transition:all .3s ease}.logo-container{display:flex;align-items:center;gap:10px;text-decoration:none}.logo-icon{width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(0,240,255,.5));transition:transform .3s ease}.logo-container:hover .logo-icon{transform:rotate(20deg) scale(1.1)}.logo-text{font-size:15px;font-weight:800;letter-spacing:1.2px;background:linear-gradient(90deg,#00f0ff 0%,#ff007f 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:filter .3s ease}.logo-container:hover .logo-text{filter:drop-shadow(0 0 6px rgba(0,240,255,.5))}.nav-links{display:flex;align-items:center;gap:8px}.nav-link-item{color:#ffffffb3;text-decoration:none;font-size:12.5px;font-weight:500;border:1px solid transparent;padding:8px 16px;border-radius:20px;transition:all .3s cubic-bezier(.25,.8,.25,1);letter-spacing:.5px}.nav-link-item:hover{color:#fff;background:rgba(255,255,255,.05);border-color:#ffffff26;box-shadow:0 4px 12px #00000026}.nav-link-item.nav-link-art{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(0,240,255,.1) 0%,rgba(168,85,247,.1) 50%,rgba(255,0,127,.1) 100%);border:1px solid rgba(0,240,255,.3);box-shadow:0 0 12px #00f0ff26,inset 0 0 8px #ffffff0a;position:relative;overflow:hidden;transition:all .35s cubic-bezier(.25,.8,.25,1)}.nav-link-item.nav-link-art:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease;pointer-events:none}.nav-link-item.nav-link-art .art-icon{width:14px;height:14px;color:#00f0ff;filter:drop-shadow(0 0 5px rgba(0,240,255,.6));transition:all .35s cubic-bezier(.34,1.56,.64,1);display:inline-block;vertical-align:middle}.nav-link-item.nav-link-art .art-text{background:linear-gradient(90deg,#00f0ff 0%,#c084fc 45%,#ff007f 100%);background-size:200% auto;background-position:left center;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-weight:700;letter-spacing:.9px;transition:all .35s ease;filter:drop-shadow(0 0 3px rgba(0,240,255,.3));display:inline-block}.nav-link-item.nav-link-art:hover{background:linear-gradient(135deg,rgba(0,240,255,.22) 0%,rgba(168,85,247,.24) 50%,rgba(255,0,127,.25) 100%);border-color:#00f0ffa6;box-shadow:0 0 20px #00f0ff59,0 0 32px #ff007f40,inset 0 0 12px #ffffff1f;transform:translateY(-2px)}.nav-link-item.nav-link-art:hover:before{left:100%}.nav-link-item.nav-link-art:hover .art-icon{transform:scale(1.22) rotate(15deg);color:#ff007f;filter:drop-shadow(0 0 8px rgba(255,0,127,.9)) drop-shadow(0 0 12px rgba(0,240,255,.6))}.nav-link-item.nav-link-art:hover .art-text{background-position:right center;filter:drop-shadow(0 0 8px rgba(0,240,255,.7)) drop-shadow(0 0 14px rgba(255,0,127,.5)) brightness(1.25);transform:scale(1.04)}.nav-link-item.nav-link-art:active{transform:translateY(0) scale(.96)}.hud-sidebar-left{position:fixed;left:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:24px;z-index:50;pointer-events:none}.hud-bar{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:10px;color:#fff6;letter-spacing:1px;text-transform:uppercase}.hud-bar span{display:block}.hud-bar .hud-highlight{color:var(--primary);font-weight:700}.hud-line{width:1px;height:80px;background:linear-gradient(180deg,var(--primary),transparent);margin-left:5px}.hud-footer{position:fixed;bottom:0;left:0;width:100%;height:45px;border-top:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;padding:0 40px;z-index:100;font-family:var(--font-mono);font-size:11px;color:#ffffff73;pointer-events:none;background:linear-gradient(to top,rgba(3,3,9,.8),transparent)}.hud-footer-left,.hud-footer-right{display:flex;align-items:center;gap:15px}.hud-dot{width:6px;height:6px;border-radius:50%;background-color:var(--emerald);box-shadow:0 0 8px var(--emerald);animation:pulse 1.5s infinite}.hud-progress-container{width:120px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}.hud-progress-bar{width:0%;height:100%;background:var(--primary);box-shadow:0 0 8px var(--primary);transition:width .1s ease-out}.sound-toggle-btn{pointer-events:auto;background:none;border:none;color:#fff6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.sound-toggle-btn:hover{color:var(--primary);text-shadow:0 0 8px var(--primary)}.scroll-container{width:100%;position:relative;z-index:10}.section{width:100%;min-height:100vh;display:flex;align-items:center;padding:80px 10%;position:relative}.section.left-align{justify-content:flex-start}.section.right-align{justify-content:flex-end}.section.finale-section{justify-content:center;align-items:flex-end;padding-bottom:12vh}.finale-content{text-align:center;z-index:10;position:relative}.finale-title{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:6px;background:linear-gradient(135deg,#ffffff,rgba(255,240,50,.9),rgba(255,200,0,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(255,240,50,.4));margin-bottom:0}.card-perspective{perspective:1000px;width:100%;max-width:540px}.glass-card{background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:24px;padding:40px;width:100%;box-shadow:0 30px 60px #00000073,inset 0 1px #ffffff1f,inset 0 -1px #0000004d;transition:border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;position:relative;overflow:hidden;transform-style:preserve-3d;transform:translateZ(0);pointer-events:auto}.fade-in-section.is-visible .glass-card{backdrop-filter:blur(var(--glass-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%)}.glass-card:hover{border-color:rgba(var(--theme-rgb),.35);box-shadow:0 30px 60px #0009,0 0 30px rgba(var(--theme-rgb),.12),inset 0 1px #ffffff40}.glass-card:before,.glass-card:after{content:"";position:absolute;width:15px;height:15px;border-color:#ffffff26;border-style:solid;pointer-events:none}.glass-card:before{top:15px;left:15px;border-width:1px 0 0 1px}.glass-card:after{bottom:15px;right:15px;border-width:0 1px 1px 0}.section-index{font-family:var(--font-mono);font-size:14px;font-weight:700;color:rgb(var(--theme-rgb));letter-spacing:3px;margin-bottom:12px;display:flex;align-items:center;gap:10px}.section-index:after{content:"";display:block;width:40px;height:1px;background:rgb(var(--theme-rgb));box-shadow:0 0 6px rgb(var(--theme-rgb))}.section-title{font-size:32px;font-weight:800;line-height:1.2;margin-bottom:16px;letter-spacing:1px;background:linear-gradient(135deg,#ffffff 50%,rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.section-desc{font-size:14px;color:#ffffffb3;line-height:1.6;margin-bottom:24px}.card-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}.feature-tag{font-family:var(--font-mono);font-size:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:6px 12px;border-radius:30px;color:#ffffffd9;display:flex;align-items:center;gap:6px;pointer-events:none!important;-webkit-user-select:none;user-select:none}.feature-tag i{width:12px;height:12px}.card-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);color:#fff;padding:12px 28px;border-radius:12px;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.25,.8,.25,1);cursor:pointer;width:100%}.card-action-btn:hover{background:linear-gradient(135deg,rgb(var(--theme-rgb)),rgba(var(--theme-rgb),.8));border-color:transparent;color:#000;font-weight:700;box-shadow:0 8px 24px rgba(var(--theme-rgb),.35);transform:translateY(-2px)}.card-action-btn i{transition:transform .3s}.card-action-btn:hover i{transform:translate(4px)}.dual-btn-group{display:flex;gap:12px;width:100%}.dual-btn-group .card-action-btn{flex:1}.intro-card{max-width:650px;text-align:center}.intro-card .section-index{justify-content:center}.intro-card .section-index:after{display:none}.intro-card .section-title{font-size:48px;background:linear-gradient(135deg,#ffffff,rgba(var(--primary-rgb),.9),rgba(var(--secondary-rgb),.9));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.intro-card .card-action-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;color:#000;font-weight:700;box-shadow:0 10px 30px rgba(var(--primary-rgb),.35);margin-top:15px}.intro-card .card-action-btn:hover{box-shadow:0 15px 40px rgba(var(--primary-rgb),.5);transform:translateY(-3px) scale(1.02)}.intro-card .card-action-btn i{animation:floatDown 1.5s infinite}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1;box-shadow:0 0 15px var(--emerald)}to{transform:scale(1);opacity:.8}}@keyframes floatDown{0%{transform:translateY(-3px)}50%{transform:translateY(3px)}to{transform:translateY(-3px)}}.fade-in-section{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}.fade-in-section.is-visible{opacity:1;transform:translateY(0)}@media (max-width: 900px){.section{padding:100px 30px;justify-content:center!important}.hud-sidebar-left{display:none}.hud-header{padding:0 20px}.logo-text{font-size:15px}.intro-card .section-title{font-size:36px}}.hud-panel-title{font-family:var(--font-mono);font-size:9px;font-weight:700;color:#fff6;letter-spacing:1.5px;margin-top:18px;margin-bottom:8px;text-transform:uppercase;text-align:left}.preset-grid-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.preset-btn-mini{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#ffffffa6;font-size:10.5px;padding:8px 0;border-radius:8px;cursor:pointer;transition:all .25s cubic-bezier(.25,.8,.25,1);text-align:center;font-family:var(--font-title)}.preset-btn-mini:hover{border-color:rgba(var(--primary-rgb),.3);color:#fff;background:rgba(var(--primary-rgb),.04)}.preset-btn-mini.active{background:rgba(var(--primary-rgb),.12);border-color:var(--primary);color:var(--primary);box-shadow:0 0 12px rgba(var(--primary-rgb),.2);font-weight:600}.slider-row{margin-top:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:6px}.slider-label{display:flex;justify-content:space-between;font-size:11px;color:#ffffff8c;font-family:var(--font-mono)}.tech-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;outline:none;pointer-events:auto!important}.tech-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:rgb(var(--theme-rgb));box-shadow:0 0 8px rgb(var(--theme-rgb));cursor:pointer;transition:transform .2s,background-color .2s;pointer-events:auto!important}.tech-slider::-webkit-slider-thumb:hover{transform:scale(1.25);background-color:#fff}.code-box-container{position:relative;margin-top:15px;margin-bottom:20px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);overflow:hidden}.code-box{margin:0;padding:14px;font-family:var(--font-mono);font-size:10.5px;color:#ffffffd9;overflow-x:auto;line-height:1.55;text-align:left}.btn-copy-code{width:100%;background:rgba(255,255,255,.03);border:none;border-top:1px solid rgba(255,255,255,.06);color:#ffffff80;padding:8px 0;font-size:11px;font-family:var(--font-mono);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.btn-copy-code:hover{background:rgba(var(--primary-rgb),.06);color:var(--primary)}.btn-copy-code.copied{color:var(--emerald);background:rgba(var(--emerald-rgb),.08)}