.weight{display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}.weight.draggable{cursor:grab}.weight.draggable:active{cursor:grabbing}.weight.draggable:hover .weight-body{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 12px #3b82f699}.weight-body{width:50px;height:50px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #3b82f666,inset 0 -2px 4px #0003;transition:transform .2s,box-shadow .2s}.weight:hover .weight-body{transform:translateY(-2px);box-shadow:0 6px 8px #3b82f680}.weight-value{color:#fff;font-weight:700;font-size:.9em}.balloon{display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none}.balloon.draggable{cursor:grab}.balloon.draggable:active{cursor:grabbing}.balloon.draggable:hover .balloon-body{transform:translateY(-4px) scale(1.05);box-shadow:0 -8px 12px #ef444499}.balloon-body{width:45px;height:55px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%/60% 60% 40% 40%;display:flex;align-items:center;justify-content:center;box-shadow:0 -4px 6px #ef444466,inset -2px 2px 4px #ffffff4d;position:relative;transition:transform .2s,box-shadow .2s}.balloon:hover .balloon-body{transform:translateY(-2px);box-shadow:0 -6px 8px #ef444480}.balloon-value{color:#fff;font-weight:700;font-size:.9em}.balloon-string{width:2px;height:20px;background:#ffffff4d;margin-top:-2px}.scale-container{width:100%;position:relative}.balance-indicator{text-align:center;font-size:1.2em;margin-bottom:.5rem;font-weight:700;color:#4ade80}.scale-instruction{text-align:center;font-size:.85em;margin-bottom:1rem;color:#64748b;font-style:italic}.scale{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;position:relative}.scale-side{flex:1;display:flex;flex-direction:column;align-items:center}.side-label{font-size:1.1em;margin-bottom:.5rem;color:#a0aec0;font-weight:600}.items-container{min-height:120px;width:100%;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:flex-end;padding:1rem;background:#ffffff0d;border-radius:8px;border:2px dashed rgba(255,255,255,.1);transition:all .3s ease}.items-container.drag-over{background:#646cff33;border-color:#646cff99;border-style:solid;box-shadow:0 0 20px #646cff66;transform:scale(1.02)}.empty-placeholder{color:#666;font-style:italic;align-self:center}.fulcrum{position:relative;display:flex;flex-direction:column;align-items:center;z-index:1}.beam{width:200px;height:8px;background:linear-gradient(90deg,#646cff,#747bff);border-radius:4px;margin-bottom:-4px;transition:transform .3s ease;box-shadow:0 2px 8px #646cff4d}.pivot{font-size:2em;color:#646cff;text-shadow:0 2px 8px rgba(100,108,255,.5)}.unknown-triangle{width:50px;height:50px;background:linear-gradient(135deg,#f59e0b,#d97706);clip-path:polygon(50% 0%,0% 100%,100% 100%);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 8px #f59e0b66}.unknown-triangle span{position:absolute;bottom:15%;font-weight:700;font-size:1.2em;color:#fff}.removable-item{position:relative;cursor:pointer;transition:all .2s ease}.removable-item:hover{transform:scale(1.1);filter:brightness(1.2)}.removable-item:hover:after{content:"×";position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#ef4444;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;box-shadow:0 2px 6px #0006;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.removable-item:active{transform:scale(.95)}.control-panel{margin-top:2rem;padding:1.5rem;background:linear-gradient(180deg,#0f172a,#1e293b);border-radius:12px;border:2px solid rgba(100,108,255,.3);box-shadow:0 4px 6px #0000004d}.control-title{text-align:center;font-size:1.3em;margin-bottom:1.5rem;color:#a0aec0;font-weight:600}.control-grid{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:0 auto}.control-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;justify-items:center}.control-button{width:60px;height:60px;border-radius:50%;border:2px solid #646cff;background:#646cff1a;color:#646cff;font-size:1.5em;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.control-button:hover{background:#646cff33;border-color:#747bff;color:#747bff;transform:scale(1.05)}.control-button:active{transform:scale(.95)}.control-button:focus{outline:none;border-color:#747bff;box-shadow:0 0 0 3px #646cff33}.item-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#0003;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.item-label{font-size:.9em;color:#cbd5e0;font-weight:500;text-align:center}@media (max-width: 768px){.control-panel{padding:1rem;margin-top:1.5rem}.control-title{font-size:1.2em;margin-bottom:1rem}.control-row{gap:.75rem}.control-button{width:50px;height:50px;font-size:1.3em}.item-display{padding:.75rem}}@media (max-width: 480px){.control-grid{gap:.75rem}.control-row{gap:.5rem}.control-button{width:44px;height:44px;font-size:1.2em}.item-display{padding:.5rem}.item-label{font-size:.8em}}.workspace{width:100%;min-height:400px;background:linear-gradient(180deg,#1a1a2e,#16213e);border-radius:12px;padding:2rem;margin:2rem 0;box-shadow:0 4px 6px #0000004d;display:flex;flex-direction:column;gap:0}.equation-display{background:#646cff1a;border:2px solid rgba(100,108,255,.3);border-radius:8px;padding:1.5rem;margin:1rem 0;text-align:center}.equation-label{font-size:.9em;color:#a0aec0;margin-bottom:.5rem;font-weight:500}.equation-text{font-size:1.8em;font-family:Courier New,monospace;font-weight:700;color:#646cff;letter-spacing:2px}.victory-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.victory-modal-card{background:linear-gradient(135deg,#646cff26,#747bff1a);border:3px solid #646cff;border-radius:16px;padding:2.5rem;max-width:500px;width:90%;animation:bounceIn .5s ease;position:relative;box-shadow:0 10px 40px #646cff66;text-align:center}.victory-close-btn{position:absolute;top:1rem;right:1rem;background:transparent;border:none;font-size:2em;color:#a0aec0;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;transition:color .2s,transform .2s}.victory-close-btn:hover{color:#646cff;transform:scale(1.1)}.victory-celebration{font-size:4em;margin-bottom:1rem;animation:celebrate 1s ease infinite}.victory-title{font-size:2em;color:#646cff;margin-bottom:1rem;font-weight:700}.victory-message{font-size:1.3em;margin-bottom:2rem;color:#a0aec0}.victory-message strong{color:#4ade80;font-size:1.2em}.victory-actions{display:flex;flex-direction:column;gap:1rem;align-items:center}.victory-btn{border-radius:8px;border:1px solid transparent;padding:.8em 1.5em;font-size:1.1em;font-weight:600;font-family:inherit;cursor:pointer;transition:all .25s;width:100%;max-width:300px}.victory-btn-primary{background-color:#646cff;color:#fff;border-color:#646cff}.victory-btn-primary:hover{background-color:#535bf2;transform:translateY(-2px);box-shadow:0 4px 12px #646cff66}.victory-btn-secondary{background-color:#1a1a1a;color:#a0aec0;border-color:#a0aec0}.victory-btn-secondary:hover{border-color:#646cff;color:#646cff;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.7) translateY(-20px)}50%{transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes celebrate{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}@media (max-width: 640px){.victory-modal-card{padding:2rem 1.5rem;width:95%}.victory-title{font-size:1.6em}.victory-message{font-size:1.1em}.victory-celebration{font-size:3em}.victory-btn{font-size:1em}}@media (prefers-color-scheme: light){.victory-modal-card{background:linear-gradient(135deg,#646cff1a,#ffffffe6)}.victory-btn-secondary{background-color:#f9f9f9;color:#646cff}}.App{max-width:1280px;margin:0 auto;padding:2rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.focus-ring{outline:2px solid #646cff;outline-offset:2px}.focus-ring-inset{outline:2px solid #646cff;outline-offset:-2px}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;color:#fff;font-size:1.2em}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #646cff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0% {transform: rotate(0deg);} 100% {transform background: rgba(100,108,255,.1); border-radius: 8px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;} .equation-selector label {font-size: 1.1em; font-weight: 600; margin-right: 1rem; color: #a0aec0;} .equation-selector select {padding: .5rem 1rem; font-size: 1em; border-radius: 6px; border: 2px solid #646cff; background: #1a1a1a; color: white; cursor: pointer; min-width: 300px;} .equation-selector select:hover {border-color: #747bff;} .equation-selector select:focus {outline: none; border-color: #747bff; box-shadow: 0 0 0 3px rgba(100,108,255,.2);} .reset-button {margin-left: 1rem; padding: .75rem 1.5rem; font-size: 1em; border-radius: 6px; border: 2px solid #ef4444; background: rgba(239,68,68,.1); color: #ef4444; cursor: pointer; transition: all .3s ease; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;} .reset-button:hover {background: rgba(239,68,68,.2); border-color: #dc2626; color: #dc2626; transform: translateY(-1px);} .reset-button:active {transform: translateY(0);} .reset-section {display: flex; justify-content: center; margin-top: 2rem; padding: 1rem 0;} @media (max-width: 768px) {.App {padding: 1rem; max-width: 100%;} header h1 {font-size: 2em;} header p {font-size: 1.1em;} .equation-selector {padding: .75rem;} .equation-selector select {min-width: 250px; font-size: .9em;} .reset-button {margin-left: 0; margin-top: 1rem; width: 100%; justify-content: center;}} @media (max-width: 480px) {.App {padding: .75rem;} header {margin-bottom: 1.5rem;} header h1 {font-size: 1.8em;} .equation-selector {flex-direction: column; align-items: stretch;} .equation-selector label {margin-right: 0; margin-bottom: .5rem; text-align: left;} .equation-selector select {min-width: 100%;}} :root {font-family: Inter,system-ui,Avenir,Helvetica,Arial,sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255,255,255,.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} * {margin: 0; padding: 0; box-sizing: border-box;} body {margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh;} #root {width: 100%; margin: 0 auto; padding: 2rem; text-align: center;} h1 {font-size: 3.2em; line-height: 1.1;} button {border-radius: 8px; border: 1px solid transparent; padding: .6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color .25s;} button:hover {border-color: #646cff;} button:focus,button:focus-visible {outline: 4px auto -webkit-focus-ring-color;} @media (prefers-color-scheme: light) {:root {color: #213547; background-color: #ffffff;} button {background-color: #f9f9f9;}}}