*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;color:#2d3748}.cool-text-wrapper{max-width:900px;margin:0 auto;padding:30px 20px;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero-section{text-align:center;margin-bottom:30px}.hero-title{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.02em}.hero-subtitle{font-size:.95rem;color:#64748b;font-weight:400}.input-section{margin-bottom:25px}.input-wrapper{position:relative;background:white;border-radius:50px;padding:16px 28px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:2px solid transparent;transition:all .3s ease}.input-wrapper:focus-within{border-color:#e2e8f0;box-shadow:0 6px 24px rgba(0,0,0,.12)}.text-input{width:100%;border:none;outline:none;font-size:1rem;font-family:inherit;background:transparent;padding:0}.text-input::-moz-placeholder{color:#cbd5e1}.text-input::placeholder{color:#cbd5e1}.results-section{background:white;border-radius:20px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,.08)}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f1f5f9}.results-title{font-size:1.25rem;font-weight:700;color:#1e293b}.results-count{font-size:.875rem;color:#64748b;background:#f1f5f9;padding:6px 16px;border-radius:20px;font-weight:500}.results-grid{display:grid;grid-template-columns:1fr;gap:8px}.font-card{background:#f8fafc;border:2px solid transparent;border-radius:10px;padding:10px 14px;transition:background .3s cubic-bezier(.4,0,.2,1),border .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;outline:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.font-card:hover:not(.copied){border-color:#e2e8f0;background:white;box-shadow:0 4px 12px rgba(0,0,0,.1)}.font-card:active,.font-card:focus{outline:none!important}.font-card.copied{background:#f0fdf4!important;border-color:#10b981!important;border-width:2px!important;animation:containerClickFeedback 8s ease-out}.font-card.copied:hover{background:#f0fdf4!important;border-color:#0EA65E!important;border-width:2px!important;box-shadow:0 4px 12px rgba(16,185,129,.2)}.font-card.copied:focus{outline:none!important;border-color:#10b981!important}@keyframes containerClickFeedback{0%{background:#f0fdf4}90%{background:#f0fdf4}to{background:#f8fafc}}.font-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.font-name{font-size:.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.font-card .copy-btn{border:none!important;padding:5px 14px;border-radius:7px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:4px;opacity:1;outline:none!important;box-shadow:none!important}.font-card .copy-btn,.font-card .copy-btn:hover{background:linear-gradient(135deg,#3b82f6,#3b82f6)!important;color:white!important}.font-card .copy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(59,130,246,.4)!important;border:none!important}.font-card .copy-btn:active{transform:translateY(0)}.font-card .copy-btn.copied,.font-card .copy-btn:active,.font-card .copy-btn:focus{border:none!important;outline:none!important}.font-card .copy-btn.copied{background:linear-gradient(135deg,#10b981,#10b981)!important;animation:successPulse .6s ease;color:white!important}.font-card .copy-btn.copied svg{stroke:white!important}.font-card .copy-btn.copied:hover{background:linear-gradient(135deg,#0EA65E,#0EA65E)!important;transform:translateY(-2px);box-shadow:0 8px 16px rgba(16,185,129,.4)!important;color:white!important;border:none!important}.font-card .copy-btn.copied:active,.font-card .copy-btn.copied:focus{border:none!important;outline:none!important}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.font-preview{font-size:1.1rem;color:#1e293b;word-break:break-word;line-height:1.15;-webkit-user-select:none;-moz-user-select:none;user-select:none}.empty-state{text-align:center;padding:50px 20px;color:#94a3b8}.empty-icon{font-size:3rem;margin-bottom:15px;opacity:.5;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.8}}.empty-text{font-size:1rem;font-weight:500}.notification{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#10b981,#10b981);color:white;padding:16px 28px;border-radius:12px;box-shadow:0 10px 40px rgba(16,185,129,.4);font-weight:600;transform:translateY(100px);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1000;display:flex;align-items:center;gap:10px}.notification.show{transform:translateY(0);opacity:1}.notification-icon{font-size:1.25rem}@media (max-width:768px){.hero-title{font-size:2rem}.results-section{padding:18px;border-radius:16px}.font-preview{font-size:1.1rem}.font-card{padding:10px 14px}.results-header{flex-direction:column;align-items:flex-start;gap:10px}.cool-text-wrapper{padding:20px 15px}.input-wrapper{padding:14px 22px}}.fade-in{animation:fadeInUp .4s ease-out forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.scroll-to-top{position:fixed;bottom:30px;left:30px;width:50px;height:50px;background:linear-gradient(135deg,#3b82f6,#3b82f6);border:none;border-radius:50%;color:white;font-size:1.5rem;cursor:pointer;box-shadow:0 8px 24px rgba(59,130,246,.4);transition:all .3s cubic-bezier(.4,0,.2,1);opacity:0;pointer-events:none;z-index:999;display:flex;align-items:center;justify-content:center}.scroll-to-top.show{opacity:1;pointer-events:all}.scroll-to-top:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(59,130,246,.5)}.scroll-to-top svg{stroke:white;width:24px;height:24px}.loading-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:12px;height:100px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:479px){.cool-text-wrapper{padding:15px 10px}.input-wrapper{padding:12px 18px;font-size:.95rem}.hero-title{font-size:1.75rem;line-height:1.2}.results-header{flex-direction:column;align-items:flex-start;gap:.75rem}.font-preview{font-size:.95rem;padding:1rem .75rem}.action-buttons{gap:.5rem}.copy-btn,.favorite-btn,.share-btn{padding:.5rem;min-width:40px;min-height:40px}.scroll-to-top{bottom:20px;left:20px;width:44px;height:44px}}@media (min-width:480px) and (max-width:639px){.cool-text-wrapper{padding:18px 12px}.hero-title{font-size:2rem}}@media (hover:none) and (pointer:coarse){.copy-btn,.favorite-btn,.share-btn{min-width:44px;min-height:44px}.action-buttons button:active{transform:scale(.95)}}@media (max-width:896px) and (orientation:landscape){.hero-title{font-size:1.5rem;margin-bottom:.75rem}.cool-text-wrapper{padding:15px}}.dark-mode body{background:linear-gradient(135deg,#1a1a1a,#2d3748)}.dark-mode .hero-title{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark-mode .hero-subtitle{color:#9ca3af}.dark-mode .input-wrapper{background:#1f2937;border-color:white}.dark-mode .input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 6px 24px rgba(59,130,246,.2)}.dark-mode .text-input{color:#e5e7eb}.dark-mode .text-input::-moz-placeholder{color:#6b7280}.dark-mode .text-input::placeholder{color:#6b7280}.dark-mode .results-section{background:#1f2937;box-shadow:0 10px 30px rgba(0,0,0,.3)}.dark-mode .results-header{border-bottom-color:#374151}.dark-mode .results-title{color:#e5e7eb}.dark-mode .results-count{background:#374151;color:#9ca3af}.dark-mode .font-card{background:#111827;border-color:#374151}.dark-mode .font-card:hover:not(.copied){background:#374151;border-color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,.2)}.dark-mode .font-card.copied,.dark-mode .font-card.copied:hover{background:#1e3a5f!important;border-color:#3b82f6!important}.dark-mode .font-card.copied:hover{box-shadow:0 4px 12px rgba(59,130,246,.2)}.dark-mode .font-name{color:#9ca3af}.dark-mode .font-preview{color:#e5e7eb}.dark-mode .empty-state{color:#6b7280}.dark-mode .notification{background:linear-gradient(135deg,#3b82f6,#3b82f6);box-shadow:0 10px 40px rgba(59,130,246,.4)}.dark-mode .loading-skeleton{background:linear-gradient(90deg,#374151 25%,#4b5563 50%,#374151 75%);background-size:200% 100%}