* { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Respect OS-level reduced motion preferences: skip animations, instant transitions, no smooth scroll. Keeps state/toast/tooltip feedback usable for motion-sensitive users. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-text-size-adjust: 100%; background-image: radial-gradient(circle, rgba(111, 141, 181, 0.08) 1px, transparent 1.4px), radial-gradient(circle at 12% 18%, rgba(197, 185, 255, 0.2) 0%, transparent 38%), radial-gradient(circle at 88% 82%, rgba(141, 220, 201, 0.18) 0%, transparent 42%); background-size: 24px 24px, auto, auto; } .view-landing body, body.view-landing { background-image: linear-gradient(to bottom, rgba(247, 251, 255, 0.72), rgba(247, 251, 255, 0.78)), url('/bg.png'); background-size: cover, cover; background-position: center center, center center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; } ::selection { background: var(--sun); color: var(--ink); } /* Small round "?" affordance. The tooltip text itself is handled by the floating tooltip system (src/ui/tooltip.js) so nothing can clip it. */ .help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--ink); font-family: 'Fredoka', sans-serif; font-size: 9px; font-weight: 700; color: var(--ink); cursor: help; line-height: 1; padding: 0; flex-shrink: 0; } .help:hover { background: var(--sun); } .help::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Single floating tooltip appended to . Positioned by JS so it can never be clipped by an overflow-hidden ancestor (the sidebar). */ .tip-floater { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; background: color-mix(in srgb, var(--ink) 90%, #1f2f47); color: #fff; padding: 0.5rem 0.75rem; border-radius: 14px; font-family: 'Fredoka', sans-serif; font-size: 0.74rem; font-weight: 500; line-height: 1.4; max-width: min(260px, calc(100vw - 24px)); text-align: center; box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .tip-floater.show { opacity: 1; transform: translateY(0); } .tip-arrow { position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; margin-left: -6px; } .tip-floater[data-placement="top"] .tip-arrow { bottom: -6px; border-top: 6px solid var(--ink); } .tip-floater[data-placement="bottom"] .tip-arrow { top: -6px; border-bottom: 6px solid var(--ink); } :where( button, a, .landing-drop, .upload-btn, .upload-replace, .preset-btn, .toggle, .adj-btn, .download-overlay ):focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }