@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}
@theme inline{@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto)); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto)); } to { height: 0; } }}@custom-variant data-open{&:where([data-state="open"]), &:where([data-open]:not([data-open="false"])) { @slot; }}@custom-variant data-closed{&:where([data-state="closed"]), &:where([data-closed]:not([data-closed="false"])) { @slot; }}@custom-variant data-checked{&:where([data-state="checked"]), &:where([data-checked]:not([data-checked="false"])) { @slot; }}@custom-variant data-unchecked{&:where([data-state="unchecked"]), &:where([data-unchecked]:not([data-unchecked="false"])) { @slot; }}@custom-variant data-selected{&:where([data-selected="true"]) { @slot; }}@custom-variant data-disabled{&:where([data-disabled="true"]), &:where([data-disabled]:not([data-disabled="false"])) { @slot; }}@custom-variant data-active{&:where([data-state="active"]), &:where([data-active]:not([data-active="false"])) { @slot; }}@custom-variant data-horizontal{&:where([data-orientation="horizontal"]) { @slot; }}@custom-variant data-vertical{&:where([data-orientation="vertical"]) { @slot; }}@utility no-scrollbar{-ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; }}@property --scroll-fade-t{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-b{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-s{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-e{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --scroll-fade-mask{syntax:"*";inherits:false}@theme inline{@keyframes scroll-fade-reveal-t { from { --scroll-fade-t: 0px; } to { --scroll-fade-t: var(--_scroll-fade-size-t,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } } @keyframes scroll-fade-reveal-b { from { --scroll-fade-b: var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } to { --scroll-fade-b: 0px; } } @keyframes scroll-fade-reveal-s { from { --scroll-fade-s: 0px; } to { --scroll-fade-s: var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } } @keyframes scroll-fade-reveal-e { from { --scroll-fade-e: var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } to { --scroll-fade-e: 0px; } }}@utility scroll-fade{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-block: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y), scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-y{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-block: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-block)); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y), scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-x{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-inline: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-inline: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); } -webkit-mask-image: var(--scroll-fade-mask,var(--scroll-fade-inline)); mask-image: var(--scroll-fade-mask,var(--scroll-fade-inline)); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out, scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-t{--_scroll-fade-size-t: var(--scroll-fade-t-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t,0px), #000 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-t 1ms ease-in-out; animation-timeline: scroll(self y); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-t: var(--_scroll-fade-size-t); }}@utility scroll-fade-b{--_scroll-fade-size-b: var(--scroll-fade-b-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-b 1ms ease-in-out; animation-timeline: scroll(self y); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-b: var(--_scroll-fade-size-b); }}@utility scroll-fade-l{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out; animation-timeline: scroll(self x); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); }}@utility scroll-fade-r{--_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self x); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-s{--_scroll-fade-size-s: var(--scroll-fade-s-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-mask: linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s,0px), #000 100%); } -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-s 1ms ease-in-out; animation-timeline: scroll(self inline); animation-range: 0 var(--scroll-fade-reveal,calc(var(--spacing) * 24)); animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-s: var(--_scroll-fade-size-s); }}@utility scroll-fade-e{--_scroll-fade-size-e: var(--scroll-fade-e-size,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); &:where([dir="rtl"], [dir="rtl"] *) { --scroll-fade-mask: linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e,0px)), transparent 100%); } -webkit-mask-image: var(--scroll-fade-mask); mask-image: var(--scroll-fade-mask); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @supports (animation-timeline: scroll()) { animation: scroll-fade-reveal-e 1ms ease-in-out; animation-timeline: scroll(self inline); animation-range: calc(100% - var(--scroll-fade-reveal,calc(var(--spacing) * 24))) 100%; animation-fill-mode: both; } @supports not (animation-timeline: scroll()) { --scroll-fade-e: var(--_scroll-fade-size-e); }}@utility scroll-fade-*{--scroll-fade-size: calc(var(--spacing) * --value(integer)); --scroll-fade-size: --value([length], [percentage]);}@utility scroll-fade-t-*{--scroll-fade-t-size: calc(var(--spacing) * --value(integer)); --scroll-fade-t-size: --value([length], [percentage]);}@utility scroll-fade-b-*{--scroll-fade-b-size: calc(var(--spacing) * --value(integer)); --scroll-fade-b-size: --value([length], [percentage]);}@utility scroll-fade-s-*{--scroll-fade-s-size: calc(var(--spacing) * --value(integer)); --scroll-fade-s-size: --value([length], [percentage]);}@utility scroll-fade-e-*{--scroll-fade-e-size: calc(var(--spacing) * --value(integer)); --scroll-fade-e-size: --value([length], [percentage]);}@utility scroll-fade-none{--scroll-fade-mask: none;}@property --shimmer-angle{syntax:"<angle>";inherits:true;initial-value:20deg}@property --shimmer-image{syntax:"*";inherits:false}@property --shimmer-text-fill{syntax:"*";inherits:false}@theme inline{@keyframes tw-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }}@utility shimmer{--_spread: var(--shimmer-spread,calc(3ch + 40px)); --_base: currentColor; --_highlight: var(--shimmer-color,oklch(from currentColor l c h / calc(alpha* .2))); background-image: var(--shimmer-image,linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread)))); background-repeat: no-repeat; background-size: calc(200% + var(--_spread) * 2) 100%; background-position: 0 0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--shimmer-text-fill,transparent); animation: tw-shimmer var(--shimmer-duration,2s) linear infinite; @variant dark { --_highlight: var(--shimmer-color,oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4))); } &:where([dir="rtl"], [dir="rtl"] *) { animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }}@utility shimmer-once{animation-iteration-count: 1;}@utility shimmer-reverse{animation-direction: reverse;}@utility shimmer-none{--shimmer-image: none; --shimmer-text-fill: currentColor;}@utility shimmer-color-*{--shimmer-color: --value(--color, [color]); --shimmer-color: color-mix(in oklch, --value(--color, [color]) calc(--modifier(integer) * 1%), transparent);}@utility shimmer-duration-*{--shimmer-duration: calc(--value(integer) * 1ms);}@utility shimmer-spread-*{--shimmer-spread: calc(var(--spacing) * --value(integer)); --shimmer-spread: --value([length], [percentage]);}@utility shimmer-angle-*{--shimmer-angle: calc(--value(integer) * 1deg);}@media (prefers-reduced-motion:reduce){.shimmer{-webkit-text-fill-color:currentColor;background-image:none;animation:none}}
@custom-variant dark (&:is([data-theme="dark"] *));@theme{ --color-apple-blue: #0071e3; --color-apple-blue-light: #0077ed;  --color-apple-green: #34c759; --color-apple-orange: #ff9500; --color-apple-red: #ff3b30; --color-apple-purple: #af52de; --color-apple-indigo: #5e5ce6;  --color-primary: #0071e3; --color-primary-rgb: 0, 113, 227; --color-primary-light: #0077ed; --color-primary-dark: #0051d4;  --color-secondary: #5e5ce6; --color-secondary-rgb: 94, 92, 230; --color-accent: #af52de; --color-accent-rgb: 175, 82, 222;  --color-success: #34c759; --color-success-rgb: 52, 199, 89; --color-warning: #ff9500; --color-warning-rgb: 255, 149, 0; --color-error: #ff3b30; --color-error-rgb: 255, 59, 48; --color-info: #007aff; --color-info-rgb: 0, 122, 255;  --color-disabled: #e5e5ea; --color-disabled-rgb: 229, 229, 234;  --key-white-text: #1e293b; --key-white-text-rgb: 30, 41, 59; --key-active-blue: #60a5fa; --key-active-blue-rgb: 96, 165, 250; --key-black-text: #ffffffb3; --color-placeholder: #c7c7cc; --color-placeholder-rgb: 199, 199, 204; --color-tooltip: #1d1d1f; --color-tooltip-rgb: 29, 29, 31; --color-popover: #fff; --color-popover-rgb: 255, 255, 255; --color-backdrop: #00000080; --color-backdrop-rgb: 0, 0, 0; --color-overlay: #0000001a; --color-overlay-rgb: 0, 0, 0;  --color-perfect: #34c759; --color-good: #007aff; --color-miss: #ff9500; --color-wrong: #ff3b30;  --bg-primary: #fff; --bg-secondary: #f5f5f7; --bg-tertiary: #fafbfc; --bg-gradient-start: #fafbfc; --bg-gradient-end: #fff;  --text-primary: #1d1d1f; --text-secondary: #86868b; --text-tertiary: #a1a1a6; --text-inverse: #fff;  --border-primary: #00000014; --border-secondary: #0000000d;  --shadow-apple-sm: 0 1px 3px #00000014, 0 1px 2px #0000000a; --shadow-apple: 0 4px 12px #00000014, 0 2px 4px #0000000a; --shadow-apple-lg: 0 12px 40px #0000001f, 0 4px 12px #0000000f; --shadow-apple-xl: 0 24px 80px #00000026, 0 8px 24px #00000014;  --shadow-sm: 0 1px 2px 0 #0000000d; --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadow-depth-1: 0 2px 8px #00000026, 0 1px 2px #0000001a; --shadow-depth-2: 0 8px 24px #0003, 0 2px 6px #00000026; --shadow-depth-3: 0 16px 48px #00000040, 0 4px 12px #0003; --shadow-float: 0 20px 60px #007aff33, 0 8px 24px #00000026; --shadow-glow: 0 0 60px #007aff40;  --radius-sm: .5rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px;  --ease-apple: cubic-bezier(.25, .1, .25, 1); --ease-apple-in: cubic-bezier(0, 0, .2, 1); --ease-apple-out: cubic-bezier(.4, 0, 1, 1);}[data-theme=dark]{--bg-primary:#000;--bg-secondary:#1d1d1f;--bg-tertiary:#2d2d2f;--bg-gradient-start:#000;--bg-gradient-end:#1d1d1f;--text-primary:#f5f5f7;--text-secondary:#a1a1a6;--text-tertiary:#6e6e73;--border-primary:#ffffff1a;--border-secondary:#ffffff0d;--color-disabled:#3a3a3c;--color-disabled-rgb:58, 58, 60;--color-placeholder:#636366;--color-placeholder-rgb:99, 99, 102;--color-tooltip:#e5e5ea;--color-tooltip-rgb:229, 229, 234;--color-popover:#1d1d1f;--color-popover-rgb:29, 29, 31;--color-backdrop:#000000b3;--color-backdrop-rgb:0, 0, 0;--color-overlay:#ffffff0d;--color-overlay-rgb:255, 255, 255}[data-theme=cyber]{--bg-primary:#000;--bg-secondary:#18181b;--bg-tertiary:#27272a;--bg-gradient-start:#000;--bg-gradient-end:#18181b;--text-primary:#22d3ee;--text-secondary:#d946ef;--text-tertiary:#a855f7;--text-inverse:#000;--border-primary:#22d3ee33;--border-secondary:#22d3ee1a;--color-primary:#22d3ee;--color-primary-rgb:34, 211, 238;--color-secondary:#d946ef;--color-secondary-rgb:217, 70, 239;--color-success:#22d3ee;--color-success-rgb:34, 211, 238;--color-warning:#d946ef;--color-warning-rgb:217, 70, 239;--color-error:#ef4444;--color-error-rgb:239, 68, 68;--color-info:#a855f7;--color-info-rgb:168, 85, 247;--color-disabled:#27272a;--color-disabled-rgb:39, 39, 42;--color-placeholder:#52525b;--color-placeholder-rgb:82, 82, 91;--color-tooltip:#22d3ee;--color-tooltip-rgb:34, 211, 238;--color-popover:#18181b;--color-popover-rgb:24, 24, 27;--color-backdrop:#000c;--color-backdrop-rgb:0, 0, 0;--color-overlay:#22d3ee0d;--color-overlay-rgb:34, 211, 238}[data-theme=classic]{--bg-primary:beige;--bg-secondary:#fffdd0;--bg-tertiary:#e8e8c7;--bg-gradient-start:beige;--bg-gradient-end:#fffdd0;--text-primary:#3e2723;--text-secondary:#5d4037;--text-tertiary:#8d6e63;--text-inverse:#fff;--border-primary:#d7ccc8;--border-secondary:#bcaaa4;--color-primary:#8d6e63;--color-primary-rgb:141, 110, 99;--color-secondary:#a1887f;--color-secondary-rgb:161, 136, 127;--color-success:#689f38;--color-success-rgb:104, 159, 56;--color-warning:#f57c00;--color-warning-rgb:245, 124, 0;--color-error:#d32f2f;--color-error-rgb:211, 47, 47;--color-info:#1976d2;--color-info-rgb:25, 118, 210;--color-disabled:#d7ccc8;--color-disabled-rgb:215, 204, 200;--color-placeholder:#a1887f;--color-placeholder-rgb:161, 136, 127;--color-tooltip:#3e2723;--color-tooltip-rgb:62, 39, 35;--color-popover:#fffdd0;--color-popover-rgb:255, 253, 208;--color-backdrop:#3e272380;--color-backdrop-rgb:62, 39, 35;--color-overlay:#8d6e631a;--color-overlay-rgb:141, 110, 99}@layer base{@apply border-border outline-ring/50;*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html{font-size:16px;line-height:1.5}@apply font-sans;html{letter-spacing:-.01em}body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .4s var(--ease-apple), color .4s var(--ease-apple)}@apply text-5xl md:text-6xl font-bold tracking-tight;h1{text-wrap:balance;line-height:1.08}@apply text-4xl md:text-5xl font-bold tracking-tight;h2{text-wrap:balance;line-height:1.12}@apply text-2xl md:text-3xl font-semibold tracking-tight;h3{text-wrap:balance;line-height:1.25}p{line-height:1.6}.tabular-nums{font-variant-numeric:tabular-nums}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}::selection{color:inherit;background:#007aff33}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media not (prefers-reduced-motion:reduce){.theme-bg-primary,.theme-bg-secondary,.theme-text-primary,.theme-text-secondary{transition:background-color .4s ease-out,color .4s ease-out}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}}@layer utilities{.glass{-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-primary);background:#ffffffb3}.glass-dark{-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-primary);background:#1d1d1fbf}.glass-card{-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-primary);background:#ffffffd9}.gradient-primary{background:linear-gradient(120deg,#007aff 0%,#5856d6 50%,#af52de 100%)}.gradient-apple{background:linear-gradient(#fafbfc 0%,#fff 100%)}.gradient-text{background:linear-gradient(120deg,#007aff 0%,#5856d6 50%,#af52de 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-warm{background:linear-gradient(120deg,#ff6b6b 0%,#ffa94d 50%,#ffd93d 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.shadow-apple-sm{box-shadow:var(--shadow-apple-sm)}.shadow-apple{box-shadow:var(--shadow-apple)}.shadow-apple-lg{box-shadow:var(--shadow-apple-lg)}.shadow-apple-xl{box-shadow:var(--shadow-apple-xl)}.apple-card{background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-apple);transition:box-shadow .35s var(--ease-apple), transform .35s var(--ease-apple)}.apple-card:hover{box-shadow:var(--shadow-apple-lg);transform:translateY(-2px)}@apply inline-flex items-center justify-center font-medium;.apple-btn{background:var(--color-primary);color:#fff;letter-spacing:-.01em;transition:background .2s var(--ease-apple), transform .2s var(--ease-apple);border-radius:980px;padding:10px 22px;font-size:14px}.apple-btn:hover{background:color-mix(in oklch, var(--color-primary), white 12%);transform:scale(1.02)}.apple-btn:active{transform:scale(.98)}@apply inline-flex items-center justify-center font-medium;.apple-btn-secondary{background:rgba(var(--color-primary-rgb), .08);color:var(--color-primary);letter-spacing:-.01em;transition:background .2s var(--ease-apple), transform .2s var(--ease-apple);border-radius:980px;padding:10px 22px;font-size:14px}.apple-btn-secondary:hover{background:rgba(var(--color-primary-rgb), .14);transform:scale(1.02)}.apple-btn-secondary:active{transform:scale(.98)}.apple-input{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);color:var(--text-primary);transition:border-color .2s var(--ease-apple), box-shadow .2s var(--ease-apple);padding:10px 14px;font-size:14px}.apple-input:focus{background:var(--bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .12);outline:none}.apple-input::placeholder{color:var(--color-placeholder)}@apply inline-flex items-center px-3 py-1.5 rounded-full;.apple-tag{background:var(--bg-tertiary);color:var(--text-secondary);letter-spacing:-.01em;font-size:12px;font-weight:500}.modal{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-2xl);box-shadow:var(--shadow-apple-xl);padding:var(--radius-xl)}@apply flex items-center justify-between gap-4;.setting-item{border-bottom:1px solid var(--border-secondary);padding:12px 4px}.setting-item:last-child{border-bottom:none}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-apple-sm);transition:box-shadow .3s var(--ease-apple), transform .3s var(--ease-apple);padding:16px}.stat-card:hover{box-shadow:var(--shadow-apple);transform:translateY(-2px)}@apply text-sm font-medium text-[#1d1d1f] px-4 py-2 rounded-full;.apple-nav-item{transition:all .2s}.apple-nav-item:hover{background:#0000000a}@apply text-sm font-medium text-[#f5f5f7] px-4 py-2 rounded-full;.apple-nav-item-dark{transition:all .2s}.apple-nav-item-dark:hover{background:#ffffff1a}.piano-white{background:linear-gradient(#fff 0%,#f9f9f9 100%);border-radius:0 0 8px 8px;box-shadow:0 2px 4px #0000001a,inset 0 -1px #0000000d}.piano-black{background:linear-gradient(#1d1d1f 0%,#000 100%);border-radius:0 0 6px 6px;box-shadow:0 4px 8px #0000004d,inset 0 -1px #ffffff0d}.piano-active{background:linear-gradient(#007aff 0%,#0051d4 100%);box-shadow:0 0 20px #007aff66,0 4px 12px #007aff4d}.note-particle{background:linear-gradient(#5e5ce6 0%,#007aff 100%);border-radius:12px;box-shadow:0 4px 16px #5e5ce666,0 2px 6px #007aff4d}.hit-perfect{background:linear-gradient(#34c759 0%,#248a3d 100%);box-shadow:0 0 40px #34c75980,0 8px 24px #34c7594d}.hit-good{background:linear-gradient(#007aff 0%,#0051d4 100%);box-shadow:0 0 40px #007aff80,0 8px 24px #007aff4d}.hit-miss{background:linear-gradient(#ff9500 0%,#e67e00 100%);box-shadow:0 0 30px #ff950066}@apply px-3 py-1 rounded-full text-xs font-medium;.tag{color:#06c;background:#007aff1a;border:1px solid #007aff33}.touch-target{min-width:48px;min-height:48px}.theme-bg-primary{background-color:var(--bg-primary);transition:background-color .4s ease-out}.theme-bg-secondary{background-color:var(--bg-secondary);transition:background-color .4s ease-out}.theme-text-primary{color:var(--text-primary);transition:color .4s ease-out}.theme-text-secondary{color:var(--text-secondary);transition:color .4s ease-out}.theme-border{border-color:var(--border-primary);transition:border-color .4s ease-out}.theme-border-primary{border-color:var(--color-primary);transition:border-color .4s ease-out}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--text-tertiary) transparent}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:3px;transition:background .3s}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}}@keyframes apple-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes apple-pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes apple-scale{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes apple-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes apple-fade-in{0%{opacity:0}to{opacity:1}}.animate-apple-float{will-change:transform;animation:4s ease-in-out infinite apple-float}.animate-apple-pulse{will-change:opacity;animation:2s ease-in-out infinite apple-pulse}.animate-apple-scale{will-change:transform;animation:2s ease-in-out infinite apple-scale}.animate-apple-slide-up{will-change:transform, opacity;animation:.4s forwards apple-slide-up}.animate-apple-fade-in{will-change:opacity;animation:.3s ease-out forwards apple-fade-in}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-glow{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(2)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-spin-slow{animation:2s linear infinite spin-slow}.animate-float{animation:3s ease-in-out infinite float}.animate-pulse-glow{animation:2s ease-in-out infinite pulse-glow}.animate-slide-up{animation:.4s ease-out forwards slide-up}.animate-fade-in{animation:.3s ease-out forwards fade-in}@theme inline{--font-heading: var(--font-sans); --font-sans: var(--font-sans); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * .6); --radius-md: calc(var(--radius) * .8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6);}:root{--background:#fff;--foreground:#0a0a0a;--card:#fff;--card-foreground:#0a0a0a;--popover:#fff;--popover-foreground:#0a0a0a;--primary:#171717;--primary-foreground:#fafafa;--secondary:#f5f5f5;--secondary-foreground:#171717;--muted:#f5f5f5;--muted-foreground:#555;--accent:#f5f5f5;--accent-foreground:#171717;--destructive:#e40014;--border:#e5e5e5;--input:#e5e5e5;--ring:#a1a1a1;--chart-1:#d4d4d4;--chart-2:#737373;--chart-3:#525252;--chart-4:#404040;--chart-5:#262626;--radius:.625rem;--sidebar:#fafafa;--sidebar-foreground:#0a0a0a;--sidebar-primary:#171717;--sidebar-primary-foreground:#fafafa;--sidebar-accent:#f5f5f5;--sidebar-accent-foreground:#171717;--sidebar-border:#e5e5e5;--sidebar-ring:#a1a1a1}@supports (color:lab(0% 0 0)){:root{--background:lab(100% 0 0);--foreground:lab(2.75381% 0 0);--card:lab(100% 0 0);--card-foreground:lab(2.75381% 0 0);--popover:lab(100% 0 0);--popover-foreground:lab(2.75381% 0 0);--primary:lab(7.78201% -.0000149012 0);--primary-foreground:lab(98.26% 0 0);--secondary:lab(96.52% -.0000298023 .0000119209);--secondary-foreground:lab(7.78201% -.0000149012 0);--muted:lab(96.52% -.0000298023 .0000119209);--muted-foreground:lab(36.2% 0 .00000596046);--accent:lab(96.52% -.0000298023 .0000119209);--accent-foreground:lab(7.78201% -.0000149012 0);--destructive:lab(48.4493% 77.4328 61.5452);--border:lab(90.952% 0 -.0000119209);--input:lab(90.952% 0 -.0000119209);--ring:lab(66.128% -.0000298023 .0000119209);--chart-1:lab(84.92% 0 -.0000119209);--chart-2:lab(48.496% 0 0);--chart-3:lab(34.924% 0 0);--chart-4:lab(27.036% 0 0);--chart-5:lab(15.204% 0 -.00000596046);--sidebar:lab(98.26% 0 0);--sidebar-foreground:lab(2.75381% 0 0);--sidebar-primary:lab(7.78201% -.0000149012 0);--sidebar-primary-foreground:lab(98.26% 0 0);--sidebar-accent:lab(96.52% -.0000298023 .0000119209);--sidebar-accent-foreground:lab(7.78201% -.0000149012 0);--sidebar-border:lab(90.952% 0 -.0000119209);--sidebar-ring:lab(66.128% -.0000298023 .0000119209)}}[data-theme=dark],.dark{--background:#0a0a0a;--foreground:#fafafa;--card:#171717;--card-foreground:#fafafa;--popover:#171717;--popover-foreground:#fafafa;--primary:#e5e5e5;--primary-foreground:#171717;--secondary:#262626;--secondary-foreground:#fafafa;--muted:#262626;--muted-foreground:#a1a1a1;--accent:#262626;--accent-foreground:#fafafa;--destructive:#ff6568;--border:#ffffff1a;--input:#ffffff26;--ring:#737373;--chart-1:#d4d4d4;--chart-2:#737373;--chart-3:#525252;--chart-4:#404040;--chart-5:#262626;--sidebar:#171717;--sidebar-foreground:#fafafa;--sidebar-primary:#1447e6;--sidebar-primary-foreground:#fafafa;--sidebar-accent:#262626;--sidebar-accent-foreground:#fafafa;--sidebar-border:#ffffff1a;--sidebar-ring:#737373}@supports (color:lab(0% 0 0)){[data-theme=dark],.dark{--background:lab(2.75381% 0 0);--foreground:lab(98.26% 0 0);--card:lab(7.78201% -.0000149012 0);--card-foreground:lab(98.26% 0 0);--popover:lab(7.78201% -.0000149012 0);--popover-foreground:lab(98.26% 0 0);--primary:lab(90.952% 0 -.0000119209);--primary-foreground:lab(7.78201% -.0000149012 0);--secondary:lab(15.204% 0 -.00000596046);--secondary-foreground:lab(98.26% 0 0);--muted:lab(15.204% 0 -.00000596046);--muted-foreground:lab(66.128% -.0000298023 .0000119209);--accent:lab(15.204% 0 -.00000596046);--accent-foreground:lab(98.26% 0 0);--destructive:lab(63.7053% 60.745 31.3109);--border:lab(100% 0 0/.1);--input:lab(100% 0 0/.15);--ring:lab(48.496% 0 0);--chart-1:lab(84.92% 0 -.0000119209);--chart-2:lab(48.496% 0 0);--chart-3:lab(34.924% 0 0);--chart-4:lab(27.036% 0 0);--chart-5:lab(15.204% 0 -.00000596046);--sidebar:lab(7.78201% -.0000149012 0);--sidebar-foreground:lab(98.26% 0 0);--sidebar-primary:lab(36.9089% 35.0961 -85.6872);--sidebar-primary-foreground:lab(98.26% 0 0);--sidebar-accent:lab(15.204% 0 -.00000596046);--sidebar-accent-foreground:lab(98.26% 0 0);--sidebar-border:lab(100% 0 0/.1);--sidebar-ring:lab(48.496% 0 0)}}[data-theme=cyber]{--background:#070707;--foreground:#60e7d8;--card:#170c0f;--card-foreground:#60e7d8;--popover:#170c0f;--popover-foreground:#60e7d8;--primary:#00b9a9;--primary-foreground:#070707;--secondary:#1b1b1b;--secondary-foreground:#60e7d8;--muted:#1b1b1b;--muted-foreground:#8972b3;--accent:#1b1b1b;--accent-foreground:#00b9a9;--destructive:#ff6358;--border:#ffffff1f;--input:#ffffff2e;--ring:#8972b3;--sidebar:#0b0b0b;--sidebar-foreground:#60e7d8;--sidebar-primary:#00b9a9;--sidebar-primary-foreground:#070707;--sidebar-accent:#1b1b1b;--sidebar-accent-foreground:#60e7d8;--sidebar-border:#ffffff1f;--sidebar-ring:#8972b3}@supports (color:lab(0% 0 0)){[data-theme=cyber]{--background:lab(1.98454% 0 0);--foreground:lab(84.0432% -41.3101 -4.24283);--card:lab(4.27033% 4.72749 .0494003);--card-foreground:lab(84.0432% -41.3101 -4.24283);--popover:lab(4.27033% 4.72749 .0494003);--popover-foreground:lab(84.0432% -41.3101 -4.24283);--primary:lab(67.3615% -63.3608 -6.22673);--primary-foreground:lab(1.98454% 0 0);--secondary:lab(9.52% -.00000745058 0);--secondary-foreground:lab(84.0432% -41.3101 -4.24283);--muted:lab(9.52% -.00000745058 0);--muted-foreground:lab(52.2763% 19.8579 -31.4238);--accent:lab(9.52% -.00000745058 0);--accent-foreground:lab(67.3615% -63.3608 -6.22673);--destructive:lab(63.2539% 62.484 40.5698);--border:lab(100% 0 0/.12);--input:lab(100% 0 0/.18);--ring:lab(52.2763% 19.8579 -31.4238);--sidebar:lab(3.04863% 0 0);--sidebar-foreground:lab(84.0432% -41.3101 -4.24283);--sidebar-primary:lab(67.3615% -63.3608 -6.22673);--sidebar-primary-foreground:lab(1.98454% 0 0);--sidebar-accent:lab(9.52% -.00000745058 0);--sidebar-accent-foreground:lab(84.0432% -41.3101 -4.24283);--sidebar-border:lab(100% 0 0/.12);--sidebar-ring:lab(52.2763% 19.8579 -31.4238)}}[data-theme=classic]{--background:#f4eee0;--foreground:#2c1e13;--card:#eae4d6;--card-foreground:#2c1e13;--popover:#eae4d6;--popover-foreground:#2c1e13;--primary:#795d46;--primary-foreground:#f8f8f8;--secondary:#dcd7c9;--secondary-foreground:#2c1e13;--muted:#dcd7c9;--muted-foreground:#735e56;--accent:#dcd7c9;--accent-foreground:#2c1e13;--destructive:#ca564d;--border:#ad9a8c66;--input:#ad9a8c4d;--ring:#795d46;--sidebar:#eae4d6;--sidebar-foreground:#2c1e13;--sidebar-primary:#795d46;--sidebar-primary-foreground:#f8f8f8;--sidebar-accent:#dcd7c9;--sidebar-accent-foreground:#2c1e13;--sidebar-border:#ad9a8c66;--sidebar-ring:#795d46}@supports (color:lab(0% 0 0)){[data-theme=classic]{--background:lab(94.2988% .0428557 7.6926);--foreground:lab(12.9057% 5.79391 10.6146);--card:lab(90.8186% .0467002 7.69546);--card-foreground:lab(12.9057% 5.79391 10.6146);--popover:lab(90.8186% .0467002 7.69546);--popover-foreground:lab(12.9057% 5.79391 10.6146);--primary:lab(41.8544% 9.44844 17.5912);--primary-foreground:lab(97.68% -.0000298023 .0000119209);--secondary:lab(86.1782% .0522733 7.69959);--secondary-foreground:lab(12.9057% 5.79391 10.6146);--muted:lab(86.1782% .0522733 7.69959);--muted-foreground:lab(41.8012% 7.94262 7.60331);--accent:lab(86.1782% .0522733 7.69959);--accent-foreground:lab(12.9057% 5.79391 10.6146);--destructive:lab(52.1575% 46.6827 29.5907);--border:lab(65.1332% 5.28774 10.1545/.4);--input:lab(65.1332% 5.28774 10.1545/.3);--ring:lab(41.8544% 9.44844 17.5912);--sidebar:lab(90.8186% .0467002 7.69546);--sidebar-foreground:lab(12.9057% 5.79391 10.6146);--sidebar-primary:lab(41.8544% 9.44844 17.5912);--sidebar-primary-foreground:lab(97.68% -.0000298023 .0000119209);--sidebar-accent:lab(86.1782% .0522733 7.69959);--sidebar-accent-foreground:lab(12.9057% 5.79391 10.6146);--sidebar-border:lab(65.1332% 5.28774 10.1545/.4);--sidebar-ring:lab(41.8544% 9.44844 17.5912)}}.shadow-depth-1{box-shadow:var(--shadow-depth-1)}.shadow-depth-2{box-shadow:var(--shadow-depth-2)}.shadow-depth-3{box-shadow:var(--shadow-depth-3)}.shadow-depth-4{box-shadow:var(--shadow-apple-xl)}@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}.btn-press:active{animation:button-press .15s var(--ease-apple)}.card-hover-depth{transition:transform .4s var(--ease-apple), box-shadow .4s var(--ease-apple)}.card-hover-depth:hover{box-shadow:var(--shadow-depth-3);transform:translateY(-4px)}@keyframes combo-pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.combo-pop{animation:.2s cubic-bezier(.34,1.56,.64,1) combo-pop}@keyframes note-hit{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.25)}to{opacity:0;transform:scale(1.4)}}.note-hit{animation:note-hit .3s var(--ease-apple-out) forwards}@keyframes page-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:page-in .4s var(--ease-apple)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-shimmer{background:linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);background-size:200% 100%;border-radius:12px;animation:1.5s infinite shimmer}.loading-spinner{border:2px solid var(--border-primary);border-top-color:var(--color-primary);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.touch-target{min-width:44px;min-height:44px}@media (max-width:768px){.touch-target{min-width:48px;min-height:48px}.piano-key{min-height:64px}.nav-btn{padding:14px 20px}}@media (max-width:374px){.compact-spacing{padding-left:12px;padding-right:12px}}@media (max-height:500px) and (orientation:landscape){.game-area{height:calc(100vh - 120px)}.song-info{display:none}}:focus-visible{outline:3px solid var(--color-primary,#0071e3);outline-offset:4px;border-radius:8px}@media (prefers-contrast:more){:root{--text-primary:#000;--text-secondary:#333;--border-primary:#000}[data-theme=dark]{--text-primary:#fff;--text-secondary:#ccc;--border-primary:#fff}}.sr-only,.sr-live{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:var(--color-primary);color:#fff;z-index:10000;transition:top .3s var(--ease-apple);border-radius:4px;padding:8px 16px;text-decoration:none;position:absolute;top:-40px;left:8px}.skip-link:focus{top:8px}.numeric-display{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.chinese-text{text-justify:inter-ideograph;word-break:break-all}.ease-apple{transition-timing-function:var(--ease-apple)}.ease-apple-in{transition-timing-function:var(--ease-apple-in)}.ease-apple-out{transition-timing-function:var(--ease-apple-out)}.transition-apple{transition:all .4s var(--ease-apple)}.transition-apple-in{transition:all .4s var(--ease-apple-in)}.transition-apple-out{transition:all .4s var(--ease-apple-out)}.transition-transform-apple{transition:transform .4s var(--ease-apple)}.transition-opacity-apple{transition:opacity .4s var(--ease-apple)}.transition-colors-apple{transition:background-color .4s var(--ease-apple), color .4s var(--ease-apple), border-color .4s var(--ease-apple)}.bg-disabled{background-color:var(--color-disabled)}.text-disabled{color:var(--color-disabled)}.border-disabled{border-color:var(--color-disabled)}.text-placeholder,.placeholder-text::placeholder{color:var(--color-placeholder)}.bg-tooltip{background-color:var(--color-tooltip)}.text-tooltip{color:var(--color-tooltip)}.bg-popover{background-color:var(--color-popover)}.text-popover{color:var(--color-popover)}.border-popover{border-color:var(--color-popover)}.bg-backdrop{background-color:var(--color-backdrop)}.bg-overlay{background-color:var(--color-overlay)}.bg-disabled-rgb{background-color:rgba(var(--color-disabled-rgb), .5)}.bg-tooltip-rgb{background-color:rgba(var(--color-tooltip-rgb), .95)}.bg-popover-rgb{background-color:rgba(var(--color-popover-rgb), .98)}.bg-backdrop-rgb{background-color:rgba(var(--color-backdrop-rgb), .5)}.bg-overlay-rgb{background-color:rgba(var(--color-overlay-rgb), .1)}.disabled-state{background-color:var(--color-disabled);color:var(--color-placeholder);cursor:not-allowed;opacity:.6;transition:all .2s var(--ease-apple)}.disabled-state:hover{opacity:.7}.placeholder-animated::placeholder{color:var(--color-placeholder);transition:color .2s}.placeholder-animated:focus::placeholder{color:#0000}.tooltip-arrow{background-color:var(--color-tooltip);color:var(--text-inverse);border-radius:var(--radius-md);box-shadow:var(--shadow-apple);padding:8px 12px;font-size:13px;position:relative}.tooltip-arrow:before{content:"";border:6px solid #0000;position:absolute}.tooltip-arrow.bottom:before{border-bottom-color:var(--color-tooltip);top:-12px;left:50%;transform:translate(-50%)}.tooltip-arrow.top:before{border-top-color:var(--color-tooltip);bottom:-12px;left:50%;transform:translate(-50%)}.popover-shadow{background-color:var(--color-popover);box-shadow:var(--shadow-apple-lg);border:1px solid var(--border-primary);border-radius:var(--radius-lg)}.backdrop-blur{background-color:var(--color-backdrop);-webkit-backdrop-filter:blur(8px)}.overlay-hover{background-color:var(--color-overlay);transition:background-color .2s}.overlay-hover:hover{background-color:rgba(var(--color-overlay-rgb), .15)}[data-theme=cyber] .neon-glow{box-shadow:0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 15px var(--color-primary), 0 0 20px var(--color-primary), 0 0 35px var(--color-primary), 0 0 40px var(--color-primary)}[data-theme=cyber] .neon-glow-secondary{box-shadow:0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), 0 0 15px var(--color-secondary), 0 0 20px var(--color-secondary), 0 0 35px var(--color-secondary)}[data-theme=cyber] .neon-text{color:var(--color-primary);text-shadow:0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 15px var(--color-primary), 0 0 20px var(--color-primary);animation:2s infinite alternate neon-flicker}[data-theme=cyber] .neon-text-secondary{color:var(--color-secondary);text-shadow:0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary), 0 0 15px var(--color-secondary)}[data-theme=cyber] .pulse-neon{animation:2s ease-in-out infinite pulse-neon}@keyframes pulse-neon{0%,to{box-shadow:0 0 5px var(--color-primary), 0 0 10px var(--color-primary)}50%{box-shadow:0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 30px var(--color-primary), 0 0 40px var(--color-primary)}}[data-theme=cyber] .scanlines{position:relative;overflow:hidden}[data-theme=cyber] .scanlines:before{content:"";pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#22d3ee08 2px 4px);width:100%;height:100%;position:absolute;top:0;left:0}[data-theme=cyber] .cyber-grid{background-image:linear-gradient(#22d3ee1a 1px,#0000 1px),linear-gradient(90deg,#22d3ee1a 1px,#0000 1px);background-position:50%;background-size:50px 50px}[data-theme=cyber] .cyber-grid-animated{background-image:linear-gradient(#22d3ee1a 1px,#0000 1px),linear-gradient(90deg,#22d3ee1a 1px,#0000 1px);background-position:50%;background-size:50px 50px;animation:20s linear infinite grid-move}@keyframes grid-move{0%{background-position:0 0}to{background-position:50px 50px}}[data-theme=cyber] .neon-border{border:2px solid var(--color-primary);box-shadow:0 0 5px var(--color-primary), inset 0 0 5px var(--color-primary)}[data-theme=cyber] .neon-border-secondary{border:2px solid var(--color-secondary);box-shadow:0 0 5px var(--color-secondary), inset 0 0 5px var(--color-secondary)}[data-theme=cyber] .btn-neon{color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:0 0 5px var(--color-primary), inset 0 0 5px var(--color-primary);text-shadow:0 0 5px var(--color-primary);background:0 0;transition:all .3s}[data-theme=cyber] .btn-neon:hover{background:var(--color-primary);color:var(--bg-primary);box-shadow:0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 30px var(--color-primary), inset 0 0 10px var(--color-primary);text-shadow:none;transform:translateY(-2px)}[data-theme=cyber] .btn-neon:active{box-shadow:0 0 5px var(--color-primary), inset 0 0 5px var(--color-primary);transform:translateY(0)}[data-theme=cyber] .card-cyber{background:var(--bg-secondary);border:1px solid #22d3ee33;transition:all .3s;box-shadow:0 0 10px #22d3ee1a,0 4px 16px #0000004d}[data-theme=cyber] .card-cyber:hover{border-color:#22d3ee66;transform:translateY(-4px);box-shadow:0 0 15px #22d3ee33,0 8px 24px #0006}[data-theme=cyber] .input-cyber{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid #22d3ee33;transition:all .3s;box-shadow:inset 0 0 5px #22d3ee1a}[data-theme=cyber] .input-cyber:focus{border-color:var(--color-primary);box-shadow:0 0 5px var(--color-primary), inset 0 0 5px var(--color-primary);outline:none}[data-theme=cyber] .input-cyber::placeholder{color:#22d3ee66}@keyframes neon-flicker{0%,19%,21%,23%,25%,54%,56%,to{text-shadow:0 0 5px var(--color-primary), 0 0 10px var(--color-primary), 0 0 15px var(--color-primary), 0 0 20px var(--color-primary)}20%,24%,55%{text-shadow:none}}[data-theme=cyber] .gradient-border-cyber{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:2px;position:relative}[data-theme=cyber] .gradient-border-cyber:before{content:"";background:linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-primary));border-radius:calc(var(--radius-lg) + 2px);z-index:-1;animation:3s infinite gradient-rotate;position:absolute;inset:-2px}@keyframes gradient-rotate{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}[data-theme=cyber] .particles-bg{position:relative;overflow:hidden}[data-theme=cyber] .particles-bg:before{content:"";background-image:radial-gradient(2px 2px at 20px 30px, var(--color-primary), transparent), radial-gradient(2px 2px at 40px 70px, var(--color-secondary), transparent), radial-gradient(2px 2px at 50px 160px, var(--color-primary), transparent), radial-gradient(2px 2px at 90px 40px, var(--color-secondary), transparent), radial-gradient(2px 2px at 130px 80px, var(--color-primary), transparent), radial-gradient(2px 2px at 160px 120px, var(--color-secondary), transparent);opacity:.3;pointer-events:none;background-size:200px 200px;width:100%;height:100%;animation:20s linear infinite particles-float;position:absolute;top:0;left:0}@keyframes particles-float{0%{transform:translate(0)}to{transform:translate(-200px,-200px)}}[data-theme=cyber] .progress-cyber{background:var(--bg-tertiary);border-radius:var(--radius-full);position:relative;overflow:hidden}[data-theme=cyber] .progress-cyber:after{content:"";background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));height:100%;box-shadow:0 0 10px var(--color-primary);animation:2s ease-in-out infinite progress-glow;position:absolute;top:0;left:0}@keyframes progress-glow{0%,to{box-shadow:0 0 5px var(--color-primary)}50%{box-shadow:0 0 15px var(--color-primary), 0 0 25px var(--color-primary)}}[data-theme=cyber] .toggle-cyber{background:var(--bg-tertiary);border:2px solid #22d3ee33;transition:all .3s}[data-theme=cyber] .toggle-cyber:checked{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 10px var(--color-primary)}[data-theme=cyber] ::-webkit-scrollbar{width:10px;height:10px}[data-theme=cyber] ::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-full)}[data-theme=cyber] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--color-primary), var(--color-secondary));border-radius:var(--radius-full);box-shadow:0 0 5px var(--color-primary)}[data-theme=cyber] ::-webkit-scrollbar-thumb:hover{box-shadow:0 0 10px var(--color-primary)}[dir=rtl]{direction:rtl}[dir=rtl] .rtl-flip{transform:scaleX(-1)}[dir=rtl] [class*=left-]:not(.rtl-keep){left:auto!important;right:var(--rtl-pos,0)!important}[dir=rtl] [class*=right-]:not(.rtl-keep){right:auto!important;left:var(--rtl-pos,0)!important}[dir=rtl] .rtl-ml-auto{margin-left:auto;margin-right:0}[dir=rtl] .rtl-mr-auto{margin-left:0;margin-right:auto}[dir=rtl] .rtl-text-right{text-align:left}[dir=rtl] .rtl-text-left{text-align:right}[dir=rtl] .rtl-pl-4{padding-left:0;padding-right:1rem}[dir=rtl] .rtl-pr-4{padding-left:1rem;padding-right:0}[dir=rtl] .rtl-flex-row-reverse{flex-direction:row-reverse}[dir=rtl] .rtl-icon-flip{transform:scaleX(-1)}[dir=rtl] ::-webkit-scrollbar{direction:rtl}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.390ncx5urfkfu.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.21jp631_3pja2.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_da832ead-module__aN_Ytq__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_da832ead-module__aN_Ytq__variable{--font-sans:"Geist", "Geist Fallback"}