body{margin:0}.hollow{opacity:0;pointer-events:none}#app{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-user-select:none;user-select:none;overflow:hidden}#sketch{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.color-toolbar{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:10;padding:10px 14px;border-radius:999px;background:#ffffff14;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);box-shadow:0 8px 24px #00000040}.color-palette{display:flex;align-items:center;gap:10px}.color-btn{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.6);outline:none;padding:0;background:transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-btn:before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--color, #ffffff)}.color-btn[aria-selected=true]{border-color:#fff;box-shadow:0 0 0 2px #ffffff4d}.color-btn:hover{transform:scale(1.08)}.customize-btn{position:fixed;right:24px;bottom:24px;z-index:10;padding:10px 16px;border-radius:10px;border:0;background:#ffffff14;color:#fff;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);box-shadow:0 8px 24px #00000040;cursor:pointer}.customize-panel{position:fixed;right:24px;bottom:72px;width:320px;z-index:999;padding:16px;border-radius:12px;background:#141414e6;color:#fff;box-shadow:0 12px 32px #00000059;transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.customize-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.panel-title{font-size:14px;opacity:.85}.close-btn{border:0;width:28px;height:28px;border-radius:6px;background:#ffffff14;color:#fff;cursor:pointer}.control-row{display:flex;align-items:center;gap:12px;margin:12px 0}.control-label{width:64px;font-size:13px;color:#ffffffe6}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#222,#bbb);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0000004d;cursor:pointer}.slider-hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.loader-screen{position:fixed;z-index:5;top:0;left:0;width:100%;height:100%;transition:.3s;background:#000}.loading-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading{color:#fff;font-size:1.875rem;letter-spacing:.1em}.loading span{animation:blur 1.5s calc(var(--i) / 5 * 1s) alternate infinite}@keyframes blur{to{filter:blur(2px)}}.brand-logo{position:fixed;top:24px;left:24px;width:108px;height:auto;z-index:10;padding:8px 12px;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none}.music-btn{position:fixed;top:24px;right:24px;z-index:10;border:0;padding:0;background:transparent;cursor:pointer}.music-btn img{width:28px;height:28px;display:block}.slogan{position:fixed;top:12%;left:50%;transform:translate(-50%);z-index:6;width:min(540px,70%);opacity:0;transition:opacity .35s ease;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none}.slogan.show{opacity:1}.slogan-body{position:fixed;top:12%;right:20%;z-index:6;width:min(540px,70%);opacity:0;transition:opacity .35s ease;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none}.slogan-body.show{opacity:1}.radar-badge{position:fixed;top:140px;left:100px;z-index:10;width:540px;height:auto;opacity:0;transition:opacity .25s ease;pointer-events:none}.radar-badge.show{opacity:1}.measure-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:8;opacity:0;transition:opacity .25s ease;pointer-events:none}.measure-label{paint-order:stroke;stroke:#ffffffe6;stroke-width:2px;font-family:Rajdhani,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:26px;font-weight:250;letter-spacing:2.5px;font-feature-settings:"tnum" 1}.measure-line{filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}.probe-dot{fill:#00d1ff;stroke:#fff;stroke-width:1.2px}.probe-label{fill:#fff;font-size:12px;text-anchor:start;paint-order:stroke;stroke:#ffffffe6;stroke-width:2px;font-family:Rajdhani,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:500}.probe-btn{display:none;position:fixed;right:24px;bottom:74px;z-index:10;padding:8px 12px;border-radius:10px;border:0;background:#ffffff14;color:#fff;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);box-shadow:0 8px 24px #00000040;cursor:pointer}.timeline{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:10;width:140px;height:300px;padding:0 40px}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#666;transform:translate(-50%)}.timeline-item{position:relative;height:100px;width:100%;display:flex;align-items:center;background:transparent;border:0;cursor:pointer;justify-content:flex-end}.timeline-item:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#f5f5f5;transform:translate(-50%,-50%)}.timeline-label{color:#777;font-size:14px;margin-right:90px;margin-left:10px;white-space:nowrap;transition:font-size ease-in-out .2s}.timeline-item.active .timeline-label{color:#fff}.indicator-dot{display:none}.timeline-item.active:before{width:18px;height:18px;background:transparent;border:2px solid #ffffff}.timeline-item.active .indicator-dot{display:block;position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#007aff;transform:translate(-50%,-50%)}.timeline-item.active:after{content:"";position:absolute;top:50%;left:50%;width:22px;height:1px;background:#007aff;transform:translate(-100%,-50%)}.ui-hidden .color-toolbar,.ui-hidden .customize-btn,.ui-hidden .customize-panel,.ui-hidden .brand-logo,.ui-hidden .music-btn,.ui-hidden .slogan,.ui-hidden .slogan-body,.ui-hidden .radar-badge,.ui-hidden .timeline{opacity:0!important;pointer-events:none!important}.color-toolbar,.customize-btn,.customize-panel,.brand-logo,.music-btn,.slogan,.slogan-body,.radar-badge,.timeline{transition:all ease-in-out .5s}.modify{width:428px;position:absolute;left:3%;bottom:25%;display:flex;align-items:center;transition:opacity .3s;pointer-events:none}.modify.modify-hidden{opacity:0}.modify .line-dot{position:absolute;top:50%;left:70px;width:355px;height:0;border:1px dashed rgba(255,255,255,.8);display:flex;align-items:center}.modify .line-dot:after{position:absolute;right:-2px;width:8px;height:8px;display:block;content:"";background:#fff;border-radius:100%}.modify .swiper{width:100px;height:270px;margin:0}.modify .swiper .swiper-wrapper{transition-timing-function:ease-in}.modify .swiper .swiper-wrapper .swiper-slide{width:80px;height:80px;color:#fff;border-radius:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}.swiper-slide svg{width:80px;height:80px;stroke:currentColor;color:#e6e6e6}.swiper-slide.active-color{transform:scale(1.1)!important}.swiper-slide.active-color svg{color:#000}.swiper .active-bg{position:absolute;top:50%;left:0;width:100%;height:100px;background:#fff;transform:translateY(-50%) scale(.9);border-radius:100%;transform-origin:center}.swiper .active-bg.animation{animation:zoomInOut .65s ease-in}@keyframes zoomInOut{0%{transform:translateY(-50%) scale(.9)}60%{transform:translateY(-50%) scale(.6)}to{transform:translateY(-50%) scale(.9)}}@media (max-width: 768px){.slogan{top:3%;width:clamp(280px,52vw,560px)}.slogan-body{top:22%;left:50%;right:auto;transform:translate(50%);width:clamp(280px,48vw,520px)}.radar-badge{top:140px;left:100px;width:540px}.timeline{right:12px;bottom:16px;top:auto;width:240px;height:clamp(320px,68vh,440px);padding:0 56px}.timeline-item{height:clamp(96px,20vh,144px)}.timeline-label{font-size:24px;margin-right:144px}.timeline-item.active .timeline-label{font-size:25px}}@media (max-width: 480px){.slogan{top:7%;width:240px}.slogan-body{top:5%;left:15%;width:250px}.radar-badge{top:30%;left:3%;width:220px}.brand-logo{width:68px}.timeline{right:20px;bottom:50%;top:auto;transform:translateY(50%);height:192px;width:110px;padding:5px 0}.timeline:before{left:65%}.timeline-item{height:clamp(20px,6vh,48px)}.timeline-item.active .indicator-dot{left:65%}.timeline-item.active:after{left:65%}.timeline-item:before{left:65%}.timeline-label{font-size:13px;margin-right:64px;transition:font-size ease-in-out .2s}.timeline-item.active .timeline-label{font-size:14px}.color-toolbar{bottom:15px}.modify{width:160px;height:135px;display:flex;align-items:center}.modify .line-dot{width:143.5px;left:35px}.modify .swiper{width:50px;height:135px}.modify .swiper .swiper-wrapper .swiper-slide{width:40px;height:40px}.swiper-slide svg{width:40px;height:40px}.swiper .active-bg{height:50px}}@media (orientation: landscape){.slogan{top:6%;width:min(600px,72vh,84vw)}.slogan-body{top:4%;left:50%;right:auto;transform:translate(-50%);width:min(760px,128vh,84vw)}.radar-badge{top:140px;left:3%;width:540px}.timeline{right:0;bottom:12px;height:clamp(280px,64vh,512px);width:240px;padding:0 56px}.timeline-item{height:clamp(88px,18vh,128px)}.timeline-label{font-size:23px;margin-right:144px}.timeline-item.active .timeline-label{font-size:25px}.color-toolbar{bottom:15px}}@media (orientation: landscape) and (max-height: 420px){.brand-logo{width:68px}.slogan{top:7%;width:min(520px,64vh,76vw)}.slogan-body{top:5%;width:250px}.radar-badge{top:30%;left:3%;width:220px}.timeline{right:20px;bottom:50%;top:auto;transform:translateY(50%);height:192px;width:110px;padding:5px 0}.timeline:before{left:65%}.timeline-item{height:48px}.timeline-item.active .indicator-dot{left:65%}.timeline-item.active:after{left:65%}.timeline-item:before{left:65%}.timeline-label{font-size:13px;margin-right:64px;transition:font-size ease-in-out .2s}.timeline-item.active .timeline-label{font-size:14px}.color-toolbar{bottom:15px}.modify{width:160px;height:135px;display:flex;align-items:center}.modify .line-dot{width:143.5px;left:35px}.modify .swiper{width:50px;height:135px}.modify .swiper .swiper-wrapper .swiper-slide{width:40px;height:40px}.swiper-slide svg{width:40px;height:40px}.swiper .active-bg{height:50px}}@media (orientation: landscape) and (max-height: 360px){.radar-badge{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));width:min(240px,28vh,28vw)}}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}