@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Inter:wght@200;300;400;500;600;800;900&display=swap');

* { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: #020202; min-height: 100vh; }

.font-fancy { font-family: 'Dancing Script', cursive; letter-spacing: 0.02em; line-height: 1.05; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #020202; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #000000, var(--c1, #ff4fd8), var(--c2, #38bdf8), #000000); border-radius: 99px; }

:root {
  --c1: #ff4fd8; --c2: #38bdf8; --c3: #a855f7;
  --bgA: rgba(255, 79, 216, 0.04); --bgB: rgba(56, 189, 248, 0.04);
  --card: rgba(10, 10, 12, 0.46); --card2: rgba(15, 15, 18, 0.66);
  --stroke: rgba(255, 255, 255, 0.06); --stroke2: rgba(255, 255, 255, 0.14); --textDim: rgba(255, 255, 255, 0.62);
}

.theme-neon { --c1:#22d3ee; --c2:#a855f7; --c3:#22c55e; --bgA: rgba(34, 211, 238, 0.04); --bgB: rgba(168, 85, 247, 0.04); }
.theme-luxe { --c1:#f59e0b; --c2:#ec4899; --c3:#10b981; --bgA: rgba(245, 158, 11, 0.04); --bgB: rgba(236, 72, 153, 0.04); }
.theme-candy { --c1:#ff4fd8; --c2:#38bdf8; --c3:#a855f7; --bgA: rgba(255, 79, 216, 0.04); --bgB: rgba(56, 189, 248, 0.04); }

.glass { background: var(--card); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--stroke); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.025); border-radius: 1.5rem; }
.glass-hover { transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.glass-hover:hover { background: var(--card2); border-color: var(--stroke2); transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05); }

.gradient-text { background: linear-gradient(to right, var(--c1), var(--c2), var(--c3), var(--c1)); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rotateGradientColors 6s linear infinite; }
@keyframes rotateGradientColors { 0% { background-position: 0% center; } 100% { background-position: -300% center; } }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-animation { animation: float 6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes slowBounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.bounce-box { animation: slowBounce 6s ease-in-out infinite; will-change: transform; }
.bounce-box:hover { animation-play-state: paused; }

@keyframes drawPen { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.draw-text { opacity: 0; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 50%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 100% 0; }
.draw-text.start-draw { opacity: 1; animation: drawPen 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.typewriter-cursor::after { content: '|'; font-weight: 300; color: var(--c1); margin-left: 2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c1); }
.tag { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 8px 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); transition: all 0.35s ease; white-space: nowrap; }
.tag:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.15); }

.input { width: 100%; background: rgba(0, 0, 0, 0.52); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 15px 18px; outline: none; color: white; font-size: 0.94rem; transition: all 0.35s ease; }
.input:focus { border-color: var(--c1); box-shadow: 0 0 36px rgba(255, 255, 255, 0.025), 0 0 0 1px var(--c1); background: rgba(0,0,0,0.78); }

.btn { border-radius: 14px; padding: 15px 22px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(255, 255, 255, 0.075); background: rgba(255, 255, 255, 0.035); text-align: center; display: inline-flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; font-size: 10.5px; color: white; }
.btn:hover { background: rgba(255, 255, 255, 0.085); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.btn-primary { border: none; background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%); background-size: 200% auto; color: white; box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 8px 20px rgba(0,0,0,0.4); }
.btn-primary:hover { background-position: right center; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 12px 25px rgba(255,79,216,0.26); transform: translateY(-2px); }

.modal-backdrop { background: rgba(0,0,0,0.90); backdrop-filter: blur(16px); opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-backdrop.show { opacity: 1; }
.modal-animate-in { opacity: 0; transform: scale(0.96) translateY(20px); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-backdrop.show .modal-animate-in { opacity: 1; transform: scale(1) translateY(0); }

.toggle-checkbox:checked ~ .toggle-bg { background-color: var(--c1); border-color: var(--c1); }
.toggle-checkbox:checked ~ .dot { transform: translateX(100%); }

body.access-adhd * { animation-play-state: paused !important; }
body.access-adhd .float-animation { opacity: 0 !important; transition: opacity 0.5s ease; }