body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-height:100vh}:root{--color-primary: #1890ff;--color-primary-hover: #40a9ff;--color-primary-active: #096dd9;--color-primary-light: rgba(24, 144, 255, .2);--color-success: #52c41a;--color-success-hover: #73d13d;--color-warning: #faad14;--color-warning-hover: #ffc53d;--color-danger: #ff4d4f;--color-danger-hover: #ff7875;--color-text-primary: #333333;--color-text-secondary: #666666;--color-text-disabled: #999999;--color-text-placeholder: #bfbfbf;--color-bg-base: #ffffff;--color-bg-panel: #f8f9fa;--color-bg-hover: #f5f5f5;--color-bg-glass: rgba(255, 255, 255, .95);--color-border: #e9ecef;--color-border-input: #d9d9d9;--color-border-focus: var(--color-primary);--color-water: rgba(100, 180, 255, .5);--color-glass: rgba(180, 220, 240, .4);--color-glass-border: #5ba3d0;--color-experiment-gradient-start: #667eea;--color-experiment-gradient-end: #764ba2;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 16px;--radius-round: 25px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .2);--shadow-inner: inset 0 0 20px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--panel-width-control: 300px;--panel-width-data: 300px;--panel-max-height: calc(100vh - 16px) ;--canvas-max-height: 100%}*{margin:0;padding:0;box-sizing:border-box}html,body,#app,.app-container{overflow-x:hidden!important;width:100%!important;max-width:100%!important}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-height:100vh;color:var(--color-text-primary);overflow-x:hidden;width:100%}#app{width:100%;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}select,input[type=range]{width:100%;padding:var(--spacing-sm) 12px;border:1px solid var(--color-border-input);border-radius:var(--radius-md);font-size:14px;background:var(--color-bg-base);cursor:pointer}select:focus,input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 2px var(--color-primary-light)}input[type=range]{padding:0;height:6px;-webkit-appearance:none;background:var(--color-border);border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #1890ff66}.btn{padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:var(--color-danger-hover)}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover{background:var(--color-success-hover)}@media (max-width: 768px){body{font-size:14px}.experiment-main{padding:5px!important;margin:5px!important;min-height:calc(100vh - 120px)!important}.control-panel{padding:10px!important}.btn{padding:8px 16px!important;font-size:13px!important}select,input[type=range]{font-size:13px!important;padding:6px 10px!important}.canvas-section{min-height:250px!important;height:250px!important}.sidebar{width:100%!important;min-width:auto!important}.main-content{gap:10px!important}h1{font-size:20px!important}h2{font-size:18px!important}h3{font-size:16px!important}p{font-size:14px!important}*{max-width:100%!important;overflow-x:hidden!important}button,select,input{min-height:44px!important;min-width:44px!important}.ph-scale-experiment .main-content,.density-experiment .main-content,.bending-light-experiment .main-content{padding:10px!important}.liquid-list{max-height:200px!important}.data-panel{max-height:150px!important}}.panel{background:#fffffff2;border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.panel:hover{box-shadow:var(--shadow-lg)}.panel-title{font-size:16px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary)}.canvas-panel{background:#fffffff2;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;align-items:flex-start}.control-panel,.data-panel{background:#fffffff2;border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md);overflow-y:auto}.data-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border)}.data-item:last-child{border-bottom:none}.data-label{font-size:14px;color:var(--color-text-secondary);font-weight:500}.data-value{font-size:14px;color:var(--color-text-primary);font-weight:600;font-family:Courier New,monospace}.control-group{margin-bottom:var(--spacing-md)}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:14px;font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.experiment-container{width:100%;height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.experiment-content{flex:1;display:grid;gap:var(--spacing-sm);padding:var(--spacing-sm);overflow:hidden;min-height:0}.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#fff}.loading-spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-top:5px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-icon{font-size:64px;margin-bottom:var(--spacing-md)}.retry-btn{margin-top:var(--spacing-md);padding:12px 24px;background:#fff;border:none;border-radius:var(--radius-md);font-size:16px;cursor:pointer;transition:all var(--transition-normal)}.retry-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 768px){.panel{padding:var(--spacing-sm)}.panel-title{font-size:14px}.data-label,.data-value,.control-label{font-size:13px}}