@tailwind base;@tailwind components;@tailwind utilities;@theme{ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", sans-serif; }:root{--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .75);--text-muted: rgba(255, 255, 255, .55);--focus-ring: #2dd4bf;--glass-base: rgba(20, 25, 30, .45);--glass-highlight: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .15);--glass-border-light: rgba(255, 255, 255, .2);--accent-lofi: #4ade80;--accent-brown: #fbbf24;--accent-pink: #f472b6;--accent-white: #ffffff}@layer utilities{.text-hero{font-family:Inter,sans-serif;font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.04em;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.4)}@media(min-width:768px){.text-hero{font-size:4.5rem}}.text-body{font-family:Inter,sans-serif;font-weight:400;font-size:1rem;line-height:1.5;color:var(--text-secondary)}.text-micro{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.glass-panel{background:linear-gradient(145deg,#ffffff1f,#ffffff0a),var(--glass-base);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a}.liquid-glass{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.22),transparent 24%),linear-gradient(135deg,#14b8a62e,#ffffff0f 42%,#0f172a75),#0a12147a;backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border-color:#ffffff38;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background .25s ease}.liquid-glass:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 32%,rgba(45,212,191,.1) 72%,transparent);opacity:.55}.liquid-glass:hover{transform:translateY(-2px);border-color:#5eead461}.guide-link{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;padding:.7rem 1rem;color:#ffffffe0;font-size:.8rem;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease}.guide-link:hover{background:#ffffff1a;color:#fff}.btn-play{background:var(--glass-highlight);border:1px solid var(--glass-border-light);border-radius:50%;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s ease-in-out}.btn-play:active{transform:scale(.95);background:#ffffff26}.glow-lofi{box-shadow:0 0 20px #4ade8066;border-color:#4ade8080}.glow-brown{box-shadow:0 0 20px #fbbf2466;border-color:#fbbf2480}.glow-pink{box-shadow:0 0 20px #f472b666;border-color:#f472b680}.glow-white{box-shadow:0 0 20px #fff6;border-color:#ffffff80}.animate-float{animation:float linear infinite}.animate-fade-in{animation:fadeIn .5s ease-out forwards}}@keyframes float{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.2}90%{opacity:.2}to{transform:translateY(-100vh) rotate(180deg);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}body{background-color:#f3f4f6;overflow-x:hidden}.skip-link{position:absolute;top:-100%;left:1rem;z-index:10000;padding:.75rem 1.5rem;background:var(--focus-ring, #2dd4bf);color:#0b1315;font-weight:700;font-size:.875rem;border-radius:0 0 .75rem .75rem;text-decoration:none;transition:top .2s ease}.skip-link:focus{top:0}*:focus-visible{outline:2px solid var(--focus-ring, #2dd4bf);outline-offset:2px;border-radius:4px}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.animate-float,.animate-fade-in,.animate-spin,.animate-pulse,.animate-subtle-pulse{animation:none!important}}@media(max-width:375px){.glass-panel{padding:1rem;border-radius:1rem}}@supports (padding-bottom: env(safe-area-inset-bottom)){.pb-safe{padding-bottom:env(safe-area-inset-bottom,.5rem)}.pt-safe{padding-top:env(safe-area-inset-top,0)}}