:root{--color-primary: #008F3E;--color-primary-active: #007a36;--color-primary-hover: #009b45;--color-accent: #44D62C;--color-accent-active: #3ab824;--color-marine: #0388A5;--color-marine-hover: #027a94;--color-seafoam: #4CB8C4;--color-coral: #FF6B5A;--color-golden: #F4A261;--color-canvas: #202A44;--color-canvas-elevated: #283350;--color-canvas-light: #FAFAFA;--color-surface-card: #FFFFFF;--color-hairline: #2a3a5c;--color-hairline-on-light: #D1D1D1;--color-hairline-soft: #EBEBEB;--color-ink: #FFFFFF;--color-body: #B0B0B0;--color-body-strong: #FFFFFF;--color-body-on-light: #202A44;--color-muted: #707070;--color-muted-soft: #909090;--color-semantic-info: #0388A5;--color-semantic-success: #008F3E;--color-semantic-warning: #F13A2C;--color-savings-high: #10B981;--color-savings-mid: #F59E0B;--color-savings-low: #EF553B;--glass-bg: rgba(40, 51, 80, .65);--glass-border: rgba(255, 255, 255, .08);--glass-blur: 12px;--app-bg-opacity: .75;--section-bg: rgba(255, 255, 255, .5);--font-display: "EXO 2", sans-serif;--font-ui: "Inter", sans-serif;--font-data: "JetBrains Mono", monospace;--font-label: "Roboto Mono", monospace;--type-display-mega: 800 80px/1.05 "EXO 2", sans-serif;--type-display-xl: 600 56px/1.1 "EXO 2", sans-serif;--type-display-lg: 600 36px/1.2 "EXO 2", sans-serif;--type-display-md: 500 26px/1.5 "EXO 2", sans-serif;--type-title-md: 600 18px/1.2 "Inter", sans-serif;--type-title-sm: 500 16px/1.4 "Inter", sans-serif;--type-body-md: 400 14px/1.5 "Inter", sans-serif;--type-body-sm: 400 13px/1.5 "Inter", sans-serif;--type-caption: 400 12px/1.4 "Inter", sans-serif;--type-caption-uppercase: 600 11px/1.4 "Inter", sans-serif;--type-button: 700 14px/1 "Inter", sans-serif;--type-nav-link: 600 13px/1.4 "Inter", sans-serif;--type-number-display: 700 80px/1 "Roboto Mono", monospace;--type-data-value: 600 18px/1.2 "JetBrains Mono", monospace;--type-data-value-lg: 700 24px/1 "JetBrains Mono", monospace;--type-label-caps: 700 12px/1.4 "Roboto Mono", monospace;--space-xxxs: 4px;--space-xxs: 8px;--space-xs: 16px;--space-sm: 24px;--space-md: 32px;--space-lg: 48px;--space-xl: 64px;--space-xxl: 96px;--space-super: 128px;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--btn-primary-bg: var(--color-accent);--btn-primary-text: var(--color-body-on-light);--btn-primary-height: 48px;--btn-primary-padding: 14px 32px;--btn-primary-radius: var(--radius-none);--btn-outline-bg: transparent;--btn-outline-border: var(--color-ink);--btn-outline-text: var(--color-ink);--btn-outline-height: 48px;--btn-outline-padding: 13px 31px;--btn-outline-radius: var(--radius-none);--input-bg: var(--color-canvas-elevated);--input-border: var(--color-hairline-soft);--input-text: var(--color-ink);--input-radius: var(--radius-sm);--input-height: 36px;--input-padding: 6px 10px;--card-bg: var(--color-surface-card);--card-border: var(--color-hairline-on-light);--card-radius: var(--radius-none);--card-padding: var(--space-sm);--pill-bg-inactive: var(--color-canvas-light);--pill-border-inactive: var(--color-hairline-on-light);--pill-text-inactive: var(--color-muted-soft);--pill-radius: var(--radius-xl);--pill-height: 56px;--toggle-track-width: 44px;--toggle-track-height: 24px;--toggle-track-off: var(--color-hairline-on-light);--toggle-track-on: var(--color-seafoam);--toggle-thumb-size: 20px;--toggle-radius: var(--radius-full);--badge-bg: var(--color-canvas-elevated);--badge-text: var(--color-ink);--badge-radius: var(--radius-full);--badge-padding: 4px 12px;--tooltip-bg: var(--color-canvas);--tooltip-text: var(--color-ink);--tooltip-radius: var(--radius-lg);--tooltip-padding: 12px 14px;--tooltip-width: 220px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:16px;scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--color-body-on-light);background:url(/ocean-sea-waves-ripples-water-background_1017-37268.jpg) no-repeat center center;background-size:cover;background-attachment:fixed;background-color:var(--color-canvas);min-height:100vh;overflow:auto}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.2}h1{font-size:36px;letter-spacing:-.36px}h2{font-size:26px;letter-spacing:.195px;font-weight:500}h3{font-size:18px;letter-spacing:0}p{margin-bottom:var(--space-xs)}a{color:var(--color-marine);text-decoration:none;transition:color .2s ease}a:hover{color:var(--color-marine-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xxs);font-family:var(--font-ui);font-weight:700;font-size:14px;line-height:1;letter-spacing:1.4px;text-transform:uppercase;border:none;cursor:pointer;transition:all .2s cubic-bezier(.32,.72,0,1);-webkit-tap-highlight-color:transparent}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text);height:var(--btn-primary-height);padding:var(--btn-primary-padding);border-radius:var(--btn-primary-radius)}.btn-primary:hover{background-color:var(--color-accent-active)}.btn-primary:active{transform:scale(.98)}.btn-outline{background-color:var(--btn-outline-bg);color:var(--btn-outline-text);border:1px solid var(--btn-outline-border);height:var(--btn-outline-height);padding:var(--btn-outline-padding);border-radius:var(--btn-outline-radius)}.btn-outline:hover{background-color:#ffffff14}.btn-outline:active{transform:scale(.98)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-hairline-on-light);border-radius:var(--radius-full);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-accent);border-radius:var(--radius-full);cursor:pointer;transition:transform .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--color-accent);border-radius:var(--radius-full);cursor:pointer;border:none}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-sm)}@media (min-width: 640px){.container{padding:0 var(--space-md)}}@media (min-width: 1024px){.container{padding:0 var(--space-lg)}}@media (min-width: 1280px){.container{padding:0 var(--space-xl)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-display{font-family:var(--font-display)}.text-data{font-family:var(--font-data);font-variant-numeric:tabular-nums}.text-label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:1.1px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(.9)}60%{transform:scale(1.12)}80%{transform:scale(.97)}to{transform:scale(1)}}.animate-fade-in{animation:fadeIn .8s cubic-bezier(.32,.72,0,1) forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce .4s cubic-bezier(.32,.72,0,1)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.keyboard-nav button:focus-visible,.keyboard-nav input:focus-visible,.keyboard-nav a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button,input[type=range]::-webkit-slider-thumb,input[type=range]::-moz-range-thumb{min-height:36px;min-width:36px}@media (max-width: 639px){h1{font-size:28px}h2{font-size:22px}.section-3 .container{padding:var(--space-sm) var(--space-xs)}}@media (min-width: 640px) and (max-width: 1023px){h1{font-size:32px}}@media (min-width: 640px){.emoji-grid{grid-template-columns:repeat(5,1fr)!important}}@media (max-width: 639px){.sticky-bar .container>div:first-child{flex-direction:column;gap:var(--space-xxs)!important}}@media (max-width: 640px){.app-root{padding:6px 8px!important}.top-panels{grid-template-columns:1fr!important;gap:3px!important}.shopping-grid{grid-template-columns:repeat(3,1fr)!important}}@media (max-height: 800px){.app-root{font-size:90%}}@media (max-height: 700px){.app-root{font-size:80%}}