:root{--viewport-height: 100dvh;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--header-height-mobile: clamp(60px, 10vh, 80px);--header-height-tablet: clamp(80px, 12vh, 100px);--header-height-desktop: 100px;--header-height: var(--header-height-mobile);--touch-target-min: 44px;--button-height-mobile: clamp(44px, 10vw, 56px);--button-height-tablet: clamp(48px, 8vw, 60px);--button-height-desktop: 48px;--button-height: var(--button-height-mobile);--button-padding-x-mobile: clamp(12px, 3vw, 16px);--button-padding-x-tablet: clamp(16px, 3vw, 20px);--button-padding-x-desktop: 20px;--button-padding-x: var(--button-padding-x-mobile);--button-padding-y-mobile: clamp(8px, 2vw, 12px);--button-padding-y-tablet: clamp(10px, 2vw, 14px);--button-padding-y-desktop: 12px;--button-padding-y: var(--button-padding-y-mobile);--spacing-xs: clamp(4px, 1vw, 8px);--spacing-sm: clamp(8px, 2vw, 12px);--spacing-md: clamp(12px, 3vw, 16px);--spacing-lg: clamp(16px, 4vw, 24px);--spacing-xl: clamp(20px, 5vw, 32px);--spacing-2xl: clamp(24px, 6vw, 40px);--text-xs: clamp(10px, 2.5vw, 12px);--text-sm: clamp(12px, 3vw, 14px);--text-base: clamp(14px, 3.5vw, 16px);--text-lg: clamp(16px, 4vw, 18px);--text-xl: clamp(18px, 4.5vw, 20px);--text-2xl: clamp(20px, 5vw, 24px);--text-3xl: clamp(24px, 6vw, 30px);--container-padding: clamp(12px, 4vw, 24px);--component-gap: clamp(12px, 3vw, 20px);--border-radius: clamp(4px, 1vw, 8px);--radius-sm: clamp(4px, 1vw, 6px);--radius-md: clamp(6px, 1.5vw, 8px);--radius-lg: clamp(8px, 2vw, 12px);--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-heading: "Montserrat", var(--font-primary);--font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .35s;--ease-out: ease-out;--easing: cubic-bezier(.4, 0, .2, 1);--leading-none: 1;--leading-tight: 1.25;--leading-relaxed: 1.5;--upgrades-width: clamp(320px, 25vw, 380px);--upgrades-height-mobile-min: 150px;--upgrades-height-mobile-max: 40vh;--primary-bg: #0a0a14;--panel-bg: #1a1a2e;--text-light: #ffffff;--text-muted: rgba(255, 255, 255, .7);--sour-primary: #9acd32;--sour-secondary: #32cd32;--sour-accent: #ffd700;--ph-optimal: #50fa7b;--ph-danger: #ff5555;--secondary-bg: #1C2E3F;--interactive-green: #4CAF50;--alert-orange: #FF9800;--alert-red: #F44336;--optimal-green: #8BC34A;--accent-purple: #8040A0;--accent-green: #66BB6A;--lemon-yellow: #FFEB3B;--logo-height-mobile: clamp(32px, 6vh, 40px);--logo-height-tablet: clamp(40px, 6vh, 48px);--logo-height-desktop: 56px;--logo-height: var(--logo-height-mobile);--lemon-size-mobile: clamp(100px, 25vmin, 150px);--lemon-size-tablet: clamp(150px, 30vmin, 200px);--lemon-size-desktop: clamp(200px, 25vmin, 250px);--lemon-size: var(--lemon-size-mobile);--z-10: 10;--z-20: 20;--z-30: 30;--z-40: 40;--z-50: 50}@media (min-width: 768px){:root{--header-height: var(--header-height-tablet);--button-height: var(--button-height-tablet);--button-padding-x: var(--button-padding-x-tablet);--button-padding-y: var(--button-padding-y-tablet);--logo-height: var(--logo-height-tablet);--lemon-size: var(--lemon-size-tablet)}}@media (min-width: 1024px){:root{--header-height: var(--header-height-desktop);--button-height: var(--button-height-desktop);--button-padding-x: var(--button-padding-x-desktop);--button-padding-y: var(--button-padding-y-desktop);--logo-height: var(--logo-height-desktop);--lemon-size: var(--lemon-size-desktop);--upgrades-width: 380px;--container-padding: 24px;--component-gap: 20px}}@media (min-width: 1440px){:root{--upgrades-width: 400px;--container-padding: 32px;--component-gap: 24px}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:#f5f5f5}html,body{height:100%;max-height:100vh;overflow:hidden}app-root{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}main{flex:1;overflow:auto;min-height:0}