*,*:before,*:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}#root{display:flex;flex-direction:column;min-height:100vh}:focus-visible{outline:2px solid rgba(99,102,241,.5);outline-offset:2px;border-radius:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid rgba(99,102,241,.5);outline-offset:2px}button,a,[role=button]{transition-property:color,background-color,border-color,box-shadow,opacity;transition-duration:.2s;transition-timing-function:ease-out}.custom-scroll::-webkit-scrollbar{width:4px;height:4px}.custom-scroll::-webkit-scrollbar-thumb{background:#00000014;border-radius:4px}.custom-scroll::-webkit-scrollbar-thumb:hover{background:#00000029}.layout-root{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%231B3A6B' fill-opacity='0.7'/%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%231B3A6B' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E") 10 10,default}.layout-root button,.layout-root a,.layout-root [role=button],.layout-root label[for],.layout-root .cursor-pointer{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='12' fill='%231B3A6B' fill-opacity='0.06'  stroke='%231B3A6B' stroke-width='1.6' opacity='0.7'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%231B3A6B' fill-opacity='0.8'/%3E%3C/svg%3E") 18 18,pointer}.layout-root [class*=cursor-grab],.layout-root .cursor-grab{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='13' fill='none' stroke='%231B3A6B' stroke-width='1.2' stroke-dasharray='4 3' opacity='0.5'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%231B3A6B' fill-opacity='0.6'/%3E%3C/svg%3E") 18 18,grab}.layout-root [class*=cursor-grabbing],.layout-root .cursor-grabbing{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='11' fill='%231B3A6B' fill-opacity='0.1' stroke='%231B3A6B' stroke-width='2' opacity='0.7'/%3E%3Ccircle cx='18' cy='18' r='3.5' fill='%231B3A6B' fill-opacity='0.8'/%3E%3C/svg%3E") 18 18,grabbing}.cursor-tri-up{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 6 L26 26 L6 26 Z' fill='%231B3A6B' fill-opacity='0.12' stroke='%231B3A6B' stroke-width='1.8' stroke-linejoin='round' opacity='0.8'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-down{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 26 L6 6 L26 6 Z' fill='%231B3A6B' fill-opacity='0.12' stroke='%231B3A6B' stroke-width='1.8' stroke-linejoin='round' opacity='0.8'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-left{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16 L26 6 L26 26 Z' fill='%231B3A6B' fill-opacity='0.12' stroke='%231B3A6B' stroke-width='1.8' stroke-linejoin='round' opacity='0.8'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-right{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M26 16 L6 6 L6 26 Z' fill='%231B3A6B' fill-opacity='0.12' stroke='%231B3A6B' stroke-width='1.8' stroke-linejoin='round' opacity='0.8'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-w-up{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 6 L26 26 L6 26 Z' fill='white' fill-opacity='0.25' stroke='white' stroke-width='1.8' stroke-linejoin='round' opacity='0.9'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-w-down{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 26 L6 6 L26 6 Z' fill='white' fill-opacity='0.25' stroke='white' stroke-width='1.8' stroke-linejoin='round' opacity='0.9'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-w-left{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16 L26 6 L26 26 Z' fill='white' fill-opacity='0.25' stroke='white' stroke-width='1.8' stroke-linejoin='round' opacity='0.9'/%3E%3C/svg%3E") 16 16,pointer!important}.cursor-tri-w-right{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M26 16 L6 6 L6 26 Z' fill='white' fill-opacity='0.25' stroke='white' stroke-width='1.8' stroke-linejoin='round' opacity='0.9'/%3E%3C/svg%3E") 16 16,pointer!important}.layout-root .cursor-ew-resize,.layout-root input[type=range]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%231B3A6B' stroke-width='1' opacity='0.4'/%3E%3Cpath d='M9 16 L12 13 L12 19 Z' fill='%231B3A6B' opacity='0.65'/%3E%3Cpath d='M23 16 L20 13 L20 19 Z' fill='%231B3A6B' opacity='0.65'/%3E%3C/svg%3E") 16 16,ew-resize}.layout-root input[type=text],.layout-root input[type=number],.layout-root textarea,.layout-root [contenteditable=true]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cline x1='10' y1='4' x2='10' y2='24' stroke='%231B3A6B' stroke-width='1.4' opacity='0.7'/%3E%3Cline x1='7' y1='4' x2='13' y2='4' stroke='%231B3A6B' stroke-width='1' opacity='0.5'/%3E%3Cline x1='7' y1='24' x2='13' y2='24' stroke='%231B3A6B' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E") 10 14,text}.layout-root [disabled],.layout-root .cursor-not-allowed{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%231B3A6B' stroke-width='1' opacity='0.25'/%3E%3Cline x1='8' y1='8' x2='16' y2='16' stroke='%231B3A6B' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E") 12 12,not-allowed}.page-enter{opacity:0;transform:translateY(8px)}.page-enter-active{opacity:1;transform:translateY(0);transition:opacity .6s ease-out,transform .6s ease-out}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.15);box-shadow:0 1px 4px #0000001f;cursor:pointer;transition:transform .2s,box-shadow .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3);box-shadow:0 2px 8px #0003}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.15);box-shadow:0 1px 4px #0000001f;cursor:pointer}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSlow{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes landingBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.015)}}.animate-landing-breathe{animation:landingBreathe 2.5s ease-in-out infinite}.animate-slide-up{animation:slideUp .7s ease-out both}.animate-slide-in{animation:slideIn .5s ease-out both}.animate-scale-in{animation:scaleIn .5s ease-out both}.animate-fade-slow{animation:fadeInSlow 1.2s ease-out both}.animate-shimmer{background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 2s infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.delay-600{animation-delay:.6s}.delay-700{animation-delay:.7s}.delay-800{animation-delay:.8s}.custom-scroll::-webkit-scrollbar{width:4px}.custom-scroll::-webkit-scrollbar-track{background:transparent}.custom-scroll::-webkit-scrollbar-thumb{background:#e5e5e5;border-radius:10px}.custom-scroll::-webkit-scrollbar-thumb:hover{background:#d4d4d4}.btn-press:active{transform:scale(.97);transition:transform .1s}.panel-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#ebebeb;cursor:pointer;outline:none;position:relative;border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px #0000000f}.panel-slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:transparent}.panel-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#333;border:2.5px solid white;box-shadow:0 1px 5px #0000004d,0 0 0 1px #0000000f;cursor:grab;margin-top:-4px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;position:relative;z-index:2}.panel-slider::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 2px 8px #00000059,0 0 0 1px #00000014}.panel-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);box-shadow:0 1px 6px #0006,0 0 0 1px #0000001a}.panel-slider::-moz-range-track{height:8px;border-radius:999px;background:#ebebeb;border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px #0000000f}.panel-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#333;border:2.5px solid white;box-shadow:0 1px 5px #0000004d,0 0 0 1px #0000000f;cursor:grab}.panel-slider::-moz-range-progress{height:8px;border-radius:999px;background:#1a1a1a33}.system-label{font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:#3c3c468c;color:#14141475;transition:color .12s ease,letter-spacing .12s ease}.system-label:hover,.system-label:focus-visible{letter-spacing:.2em}[data-zone=earth] .system-label{color:#50463c99}[data-zone=fire] .system-label{color:#5a372899}[data-zone=water] .system-label{color:#32415099}[data-zone=air] .system-label{color:#282d3799}@keyframes ping-slow{0%{transform:scale(1);opacity:.6}75%,to{transform:scale(1.8);opacity:0}}.animate-ping-slow{animation:ping-slow 1.5s cubic-bezier(0,0,.2,1) infinite}@keyframes orbit-label-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.orbit-label-appear{animation:orbit-label-appear .3s ease-out both}@keyframes bead-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.bead-pulse{animation:bead-pulse 2s ease-in-out infinite}@keyframes ripple-out{0%{transform:scale(1);opacity:.6}to{transform:scale(5);opacity:0}}.ripple-out{animation:ripple-out .5s ease-out both}@keyframes beadRingIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.animate-bead-ring-in{animation:beadRingIn .4s cubic-bezier(.34,1.56,.64,1) both}@keyframes beadEnter{0%{opacity:0;transform:scale(.3)}50%{opacity:.8;transform:scale(1.08)}70%{opacity:1;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes beadExit{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.05)}to{opacity:0;transform:scale(.3)}}.diagram-bead-enter{animation:beadEnter .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes beadSnap{0%{opacity:0;transform:scale(.4) translateY(6px)}60%{opacity:1;transform:scale(1.02) translateY(-1px)}to{opacity:1;transform:scale(1) translateY(0)}}.diagram-bead-snap{animation:beadSnap .3s cubic-bezier(.22,.61,.36,1) both}@keyframes beadMorph{0%{opacity:.3;transform:scale(.7)}60%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}.diagram-bead-morph{animation:beadMorph .4s cubic-bezier(.25,.46,.45,.94) both}@keyframes ringPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes revealImage{0%{opacity:0;transform:scale(1.03) translateY(8px);filter:blur(4px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}.animate-reveal-image{animation:revealImage 1.6s cubic-bezier(.22,.61,.36,1) both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fadeInUp .6s cubic-bezier(.22,.61,.36,1) both}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}.animate-slide-in-right{animation:slideInRight .5s cubic-bezier(.22,.61,.36,1) both}@keyframes pulseGlow{0%,to{opacity:.04}50%{opacity:.08}}.animate-pulse-glow{animation:pulseGlow 3s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.6}50%{opacity:1}}.animate-breathe{animation:breathe 2s ease-in-out infinite}@keyframes hotspotBreathe{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}}@keyframes nucleusSunrise{0%{opacity:0;transform:scale(.3) translateY(120px);filter:blur(12px) brightness(.2)}25%{opacity:.4;transform:scale(.6) translateY(60px);filter:blur(6px) brightness(.6)}50%{opacity:.8;transform:scale(.85) translateY(20px);filter:blur(2px) brightness(.9)}75%{opacity:.95;transform:scale(1.04) translateY(-4px);filter:blur(0px) brightness(1.05)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0px) brightness(1)}}@keyframes nucleusGlowPulse{0%{box-shadow:0 0 #64a0ff00,0 0 #3c78dc00}30%{box-shadow:0 0 60px #64a0ff26,0 0 120px #3c78dc14}60%{box-shadow:0 0 40px #64a0ff40,0 0 80px #3c78dc1f}to{box-shadow:0 0 #64a0ff00,0 0 #3c78dc00}}@keyframes ringEmerge{0%{opacity:0;transform:scale(.4);filter:blur(8px)}40%{opacity:.3;transform:scale(.7);filter:blur(4px)}70%{opacity:.8;transform:scale(1.06);filter:blur(0px)}85%{opacity:.95;transform:scale(.98);filter:blur(0px)}to{opacity:1;transform:scale(1);filter:blur(0px)}}@keyframes ringBulge{0%{opacity:0;transform:scale(.2);filter:blur(10px)}30%{opacity:.2;transform:scale(.5);filter:blur(6px)}60%{opacity:.7;transform:scale(1.08);filter:blur(1px)}80%{opacity:.9;transform:scale(.96);filter:blur(0px)}to{opacity:1;transform:scale(1);filter:blur(0px)}}@keyframes sunriseGlow{0%{opacity:0;r:80}30%{opacity:.3}60%{opacity:.15;r:400}to{opacity:0;r:600}}@keyframes nucleusBreathe{0%{transform:scale(1)}50%{transform:scale(1.012)}to{transform:scale(1)}}@keyframes tutorialPulse{0%{transform:scale(1);opacity:.6}50%{transform:scale(1.4);opacity:0}51%{transform:scale(1);opacity:0}to{transform:scale(1);opacity:.6}}@keyframes clickHintBounce{0%,to{transform:translateY(0) scale(1);opacity:.8}15%{transform:translateY(-4px) scale(.92);opacity:1}30%{transform:translateY(0) scale(1);opacity:.8}50%{transform:translateY(0) scale(1);opacity:.5}}@keyframes rotateHint{0%{transform:rotate(0);opacity:.7}40%{transform:rotate(45deg);opacity:.9}70%{transform:rotate(-20deg);opacity:.7}to{transform:rotate(0);opacity:.5}}.nucleus-sunrise{animation:nucleusSunrise 2s cubic-bezier(.22,.61,.36,1) both}.nucleus-breathe{animation:nucleusBreathe 7s ease-in-out infinite}.nucleus-glow-pulse{animation:nucleusGlowPulse 2.5s ease-out both;animation-delay:.3s}.ring-emerge-1{animation:ringEmerge 1.4s cubic-bezier(.22,.61,.36,1) both;animation-delay:1s}.ring-emerge-2{animation:ringBulge 1.4s cubic-bezier(.22,.61,.36,1) both;animation-delay:1.4s}.ring-emerge-3{animation:ringBulge 1.4s cubic-bezier(.22,.61,.36,1) both;animation-delay:1.8s}@keyframes ringGlowPulse{0%{opacity:0}15%{opacity:1}70%{opacity:1}to{opacity:0}}.ring-glow-active{animation:ringGlowPulse 3s ease-in-out both}.workspace-content-reveal{animation:fadeInUp 1s cubic-bezier(.22,.61,.36,1) both;animation-delay:2.4s}