:root{--color-bg-primary: #f8f9fa;--color-bg-secondary: #ffffff;--color-bg-sky-top: #87CEEB;--color-bg-sky-bottom: #f0f8ff;--color-text-primary: #1a1a1a;--color-text-secondary: #666666;--color-text-display: #2c3e50;--color-button-bg: #ffffff;--color-button-hover: #f0f0f0;--color-button-active: #e0e0e0;--color-button-operator: #ff9500;--color-button-operator-hover: #ffb143;--color-border: #e0e0e0;--color-shadow: rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 24px;--font-size-xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}#root{min-height:100vh;display:flex;flex-direction:column}.calculator{width:100%;max-width:400px;margin:0 auto;background:var(--color-bg-secondary);border-radius:var(--radius-lg);box-shadow:0 4px 24px var(--color-shadow);overflow:hidden}.calculator-display{background:linear-gradient(135deg,#667eea,#764ba2);padding:var(--spacing-lg);min-height:140px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--spacing-sm);position:relative}.display-expression{font-size:var(--font-size-md);color:#fffc;text-align:right;word-break:break-all;min-height:24px}.display-result{font-size:var(--font-size-xl);font-weight:600;color:#fff;text-align:right;word-break:break-all;min-height:56px;display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-sm);position:relative}.copy-button{padding:var(--spacing-xs) var(--spacing-sm);background:#fff3;border-radius:var(--radius-sm);color:#fff;font-size:var(--font-size-sm);transition:background var(--transition-fast);cursor:pointer}.copy-button:hover{background:#ffffff4d}.calculator-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border);padding:1px}.key{padding:var(--spacing-md);background:var(--color-button-bg);font-size:var(--font-size-lg);font-weight:500;color:var(--color-text-primary);transition:background var(--transition-fast);min-height:56px;display:flex;align-items:center;justify-content:center}@media (min-width: 768px){.key{min-height:70px}}.key:hover{background:var(--color-button-hover)}.key:active{background:var(--color-button-active)}.key-operator{background:var(--color-button-operator);color:#fff;font-weight:600}.key-operator:hover{background:var(--color-button-operator-hover)}.key-clear{background:#f0f0f0;color:#ff3b30;font-weight:600}.key-equals{background:#34c759;color:#fff;font-weight:600}.key-equals:hover{background:#30b350}.key-zero{grid-column:span 2}@media (max-width: 480px){.calculator{max-width:100%;border-radius:0}.display-result{font-size:var(--font-size-lg)}.key{min-height:60px;font-size:var(--font-size-md)}}.equation-capsule{position:absolute;padding:var(--spacing-md) var(--spacing-lg);background:#fffffff2;border-radius:var(--radius-full);box-shadow:0 4px 12px #00000026;pointer-events:none;z-index:10}.equation-text{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-display);white-space:nowrap}.equation-capsule.resolved{animation:resolve-equation 2s ease-out forwards}@keyframes resolve-equation{0%{transform:translate(-50%) scale(1);box-shadow:0 4px 12px #00000026;opacity:1}10%{transform:translate(-50%) scale(1.3);box-shadow:0 0 40px #34c759,0 0 80px #34c75999,0 0 120px #34c7594d}25%{transform:translate(-50%) scale(1.25) rotate(5deg);box-shadow:0 0 40px #34c759,0 0 60px #34c759cc}40%{transform:translate(-50%) scale(1.2) rotate(-5deg);box-shadow:0 0 30px #34c759e6}55%{transform:translate(-50%) scale(1.15) rotate(3deg)}70%{transform:translate(-50%) scale(1.1) rotate(0);box-shadow:0 0 20px #34c759b3}to{transform:translate(-50%) translateY(-120px) scale(.4);opacity:0;box-shadow:0 0 10px #34c7594d}}.equation-capsule.expired{opacity:.5;animation:fade-out 2s ease-out forwards}@keyframes fade-out{to{opacity:0}}@media (max-width: 480px){.equation-capsule{padding:var(--spacing-sm) var(--spacing-md)}.equation-text{font-size:var(--font-size-md)}}@media (prefers-reduced-motion: reduce){.equation-capsule{transition:none!important}.equation-capsule.resolved,.equation-capsule.expired{animation:none!important;opacity:0}}.sky-panel{width:100%;height:200px;background:linear-gradient(to bottom,var(--color-bg-sky-top),var(--color-bg-sky-bottom));position:relative;overflow:hidden;border-radius:0;box-shadow:0 2px 12px var(--color-shadow)}@media (min-width: 768px){.sky-panel{height:300px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}@media (min-width: 1024px){.sky-panel{height:400px}}.clouds{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cloud{position:absolute;background:#fff9;border-radius:100px;animation:float-cloud linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff9;border-radius:100px}.cloud-1{width:100px;height:40px;top:20%;left:-100px}.cloud-1:before{width:50px;height:50px;top:-25px;left:10px}.cloud-1:after{width:60px;height:40px;top:-15px;right:10px}.cloud-2{width:120px;height:45px;top:50%;left:-120px}.cloud-2:before{width:60px;height:60px;top:-30px;left:15px}.cloud-2:after{width:70px;height:45px;top:-20px;right:15px}.cloud-3{width:90px;height:35px;top:70%;left:-90px}.cloud-3:before{width:45px;height:45px;top:-20px;left:10px}.cloud-3:after{width:55px;height:35px;top:-15px;right:10px}@keyframes float-cloud{0%{transform:translate(0)}to{transform:translate(calc(100vw + 200px))}}.equations-container{position:absolute;top:0;left:0;width:100%;height:100%}.sky-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-lg);padding:var(--spacing-lg);background:#ffffffe6;border-radius:var(--radius-md);box-shadow:0 2px 8px var(--color-shadow)}.sky-panel.playing .sky-overlay{display:none}@media (max-width: 480px){.sky-panel{height:300px;border-radius:0}.sky-overlay{font-size:var(--font-size-md);padding:var(--spacing-md)}}@media (prefers-reduced-motion: reduce){.cloud{animation:none!important}}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg-primary);padding:0;transition:padding var(--transition-normal)}.app:not(.play-mode){padding:var(--spacing-lg)}.app.play-mode{padding:0;background:linear-gradient(to bottom,var(--color-bg-sky-top),var(--color-bg-sky-bottom))}.app-header{text-align:center;margin-bottom:var(--spacing-lg);padding-top:var(--spacing-lg);transition:all var(--transition-normal)}.app-header h1{font-size:2.5rem;font-weight:700;color:var(--color-text-display);margin-bottom:var(--spacing-sm);text-shadow:0 2px 4px rgba(0,0,0,.1)}.subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary);font-weight:500}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--spacing-sm);max-width:100%;width:100%;margin:0 auto}.app:not(.play-mode) .app-main{max-width:600px;padding:0 var(--spacing-md)}.app.play-mode .app-main{gap:0;padding:0}.game-container{position:relative;width:100%}.game-controls{display:flex;gap:var(--spacing-sm);align-items:center;justify-content:center;width:100%;padding:var(--spacing-sm) 0}.mode-toggle{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-button-operator);color:#fff;border:none;border-radius:var(--radius-md);font-size:20px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:48px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);box-shadow:0 2px 8px #ff95004d}.mode-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff950066}.mode-toggle:active{transform:translateY(0)}.mode-toggle .text{font-size:var(--font-size-md)}.app-footer{text-align:center;padding:var(--spacing-lg);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.app.play-mode .sky-panel{height:calc(100vh - 420px);min-height:250px;max-height:400px;border-radius:0}.app.play-mode .calculator{border-radius:0;box-shadow:none}.app.play-mode .calculator-display{min-height:100px}.app.play-mode .display-result{font-size:32px;min-height:48px}.app.play-mode .display-expression{font-size:14px}.app.play-mode .key{min-height:48px;padding:var(--spacing-sm);font-size:20px}@media (min-width: 768px){.app:not(.play-mode){padding:var(--spacing-lg)}.app-main{gap:var(--spacing-lg)}.app:not(.play-mode) .app-main{max-width:600px;padding:var(--spacing-md) 0}.app.play-mode .sky-panel{height:calc(100vh - 480px);min-height:300px}}@media (min-width: 1024px){.app.play-mode .sky-panel{height:calc(100vh - 500px);min-height:350px;max-height:450px}}@media (max-width: 480px){.app-header h1{font-size:1.75rem}.mode-toggle{padding:var(--spacing-sm) var(--spacing-md)}.mode-toggle .text{font-size:var(--font-size-sm)}.app.play-mode .sky-panel{height:calc(100vh - 400px);min-height:220px}.app.play-mode .calculator-display{min-height:90px}.app.play-mode .display-result{font-size:28px}.app.play-mode .key{min-height:44px;font-size:18px}}.game-hud{position:absolute;top:8px;right:8px;display:flex;gap:8px;align-items:center;background:#fffffff2;padding:8px 12px;border-radius:20px;box-shadow:0 2px 8px #0003;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-level{background:var(--color-button-operator);color:#fff;border:none;border-radius:12px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer;transition:transform var(--transition-fast);min-width:60px;min-height:32px}.hud-level:hover{transform:scale(1.05)}.hud-level:active{transform:scale(.95)}.hud-score{font-size:18px;font-weight:700;color:var(--color-text-display);min-width:40px;text-align:center}.hud-pause,.hud-exit{background:#fffc;border:2px solid var(--color-border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all var(--transition-fast)}.hud-pause:hover,.hud-exit:hover{background:#fff;border-color:var(--color-button-operator);transform:scale(1.05)}.hud-pause:active,.hud-exit:active{transform:scale(.95)}@media (max-width: 480px){.game-hud{gap:6px;padding:6px 10px}.hud-level{padding:4px 10px;font-size:13px;min-width:50px}.hud-score{font-size:16px;min-width:35px}.hud-pause,.hud-exit{width:36px;height:36px;font-size:16px}}