:root{--bg-900: #05030f;--bg-800: #0b0a1f;--bg-700: #12122e;--surface-800: rgba(20, 22, 45, .92);--surface-700: rgba(31, 34, 61, .85);--surface-600: rgba(41, 45, 80, .75);--border-soft: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .18);--primary: #7b5bff;--primary-soft: rgba(123, 91, 255, .16);--accent: #4ff3c8;--text-strong: #f5f6ff;--text-muted: rgba(235, 237, 255, .72);--text-soft: rgba(235, 237, 255, .56);--text-faint: rgba(235, 237, 255, .32);--shadow-xl: 0 40px 120px rgba(8, 10, 28, .55);--shadow-lg: 0 28px 80px rgba(8, 10, 28, .42);--shadow-md: 0 18px 48px rgba(8, 10, 28, .38);--radius-lg: 32px;--radius-md: 22px;--radius-sm: 16px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;scroll-behavior:smooth}body{font-family:Sofia Sans,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:radial-gradient(circle at top left,rgba(123,91,255,.22),transparent 52%),radial-gradient(circle at bottom right,rgba(79,243,200,.18),transparent 45%),linear-gradient(160deg,var(--bg-900),var(--bg-700));color:var(--text-muted);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:#7b5bff66;color:var(--text-strong)}#root{min-height:100%}.appRoot{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.heroSection{position:relative;padding:32px 0 120px;background:linear-gradient(180deg,#0f0e25eb,#080818f0 58%,#070714fa)}.heroGradient{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 20% 18%,rgba(127,90,255,.35),transparent 55%),radial-gradient(circle at 85% 15%,rgba(79,243,200,.22),transparent 45%),radial-gradient(circle at 50% 90%,rgba(123,91,255,.2),transparent 60%);opacity:.9}.navBar{position:sticky;top:0;z-index:10;max-width:1180px;margin:0 auto 84px;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;background:#0b0b1cbd;border:1px solid rgba(255,255,255,.06);border-radius:18px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-md)}.brand{display:flex;align-items:center;gap:14px}.brandMark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#7b5bff80,#4ff3c873);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;color:var(--text-strong)}.brandName{display:block;font-size:16px;font-weight:600;color:var(--text-strong)}.brandTagline{display:block;font-size:12px;color:var(--text-soft)}.navLinks{display:flex;gap:24px;font-size:14px}.navLinks a{color:var(--text-soft);text-decoration:none;transition:color .2s ease}.navLinks a:hover{color:var(--text-strong)}.navActions{display:flex;align-items:center;gap:12px}.navGhost,.navPrimary{text-decoration:none;font-size:14px;font-weight:500;padding:10px 18px;border-radius:12px;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px}.navGhost{color:var(--text-soft);border:1px solid rgba(255,255,255,.08);background:#12132899}.navGhost:hover{border-color:#ffffff29;color:var(--text-strong)}.navPrimary{color:var(--text-strong);background:linear-gradient(135deg,#7b5bffe6,#4ff3c8d1);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px #7b5bff59}.navPrimary:hover{transform:translateY(-1px);box-shadow:0 20px 48px #7b5bff73}.heroContent{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding:0 32px;align-items:stretch}.heroCopy{display:flex;flex-direction:column;gap:12px;max-width:420px}.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.heroTitle{font-size:56px;line-height:1;letter-spacing:-.04em;color:var(--text-strong)}.heroSubtitle{font-size:18px;color:var(--text-soft);max-width:320px}.heroConverter{display:flex;align-items:stretch}.converterCard{flex:1;display:flex;flex-direction:column;gap:22px;padding:32px;border-radius:var(--radius-md);background:#121326c7;border:1px solid var(--border-soft);box-shadow:var(--shadow-lg)}.converterHeader{display:grid;gap:6px}.converterHeader h2{font-size:24px;color:var(--text-strong);letter-spacing:-.01em}.sectionEyebrow{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.converterGrid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.textareaCard{position:relative;border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:#121326c7;box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column}.cardHeader{padding:18px 22px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:16px}.matchTypeTitle{font-size:16px;color:var(--text-strong);letter-spacing:.01em}.matchTypeFormat code{display:block;padding:6px 12px;border-radius:10px;background:var(--primary-soft);color:var(--text-strong);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:13px;letter-spacing:.02em}.keywordTextarea{flex:1;width:100%;min-height:240px;border:none;background:transparent;color:var(--text-strong);padding:22px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:14px;line-height:1.6;resize:none;outline:none}.keywordTextarea::placeholder{color:#ebedff59}.copyIcon{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:12px;border:1px solid var(--border-soft);background:#121328d9;color:var(--text-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,background .2s ease,border .2s ease}.copyIcon:hover{transform:translateY(-1px);background:linear-gradient(135deg,#7b5bffd9,#4ff3c8bf);border-color:var(--border-strong);color:var(--text-strong)}.copyIcon:active{transform:scale(.98)}.footer{border-top:1px solid rgba(255,255,255,.08);padding:32px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-faint);background:#070710db}.footer a{color:var(--text-soft);text-decoration:none;transition:color .2s ease}.footer a:hover{color:var(--text-strong)}@media (max-width: 1200px){.navBar{margin:0 32px 72px}.heroContent{grid-template-columns:1fr;gap:48px}.heroCopy{max-width:none}.converterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 900px){.navBar{flex-wrap:wrap;gap:18px;justify-content:center}.navLinks{order:3;width:100%;justify-content:center}.navActions{order:2}.heroTitle{font-size:42px}.converterCard{padding:28px}}@media (max-width: 720px){.navBar{margin:0 20px 56px;padding:16px 20px}.heroSection{padding-bottom:90px}.heroContent{padding:0 20px}.heroTitle{font-size:34px}.keywordTextarea{min-height:220px;padding:18px}.converterGrid{grid-template-columns:1fr}.cardHeader{flex-direction:column;align-items:flex-start;gap:10px}.footer{flex-direction:column;gap:12px;text-align:center}}