:root {--bg: #13082b;--surface: #1c1035;--border: rgba(255, 255, 255, 0.06);--text: #e8e0f5;--muted: #9480bb;--accent: #a100a1;--accent2: #c800c8;--glow: rgba(161, 0, 161, 0.35);--safe: #36b37e;--warn: #f0c040;--danger: #ff6b6b;--panel: var(--surface);--panel-2: var(--card);--panel-3: var(--bg);--line: var(--border);--accent-2: var(--accent2);--accent-glow: var(--glow);--accent-dim: rgba(161, 0, 161, 0.55);--gold: var(--warn);--radius: 8px;--shadow: 0 18px 40px rgba(0, 0, 0, .32);--font-family: 'Inter', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;--repeat-gradient: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px);--transition: 0.14s ease;--pixel-font: 'Press Start 2P', monospace;}[data-theme="light"] {--bg: #f0eff5;--surface: #ffffff;--border: rgba(0, 0, 0, 0.08);--text: #1a1030;--muted: #6b5f80;--accent: #7700b3;--accent2: #9900dd;--glow: rgba(119, 0, 179, 0.15);--tile-bg: #ffffff;--tile-border-t: rgba(0, 0, 0, 0.12);--tile-border-b: rgba(0, 0, 0, 0.04);--tile-hover-bg: #f3f0ff;--tile-sel-bg: #ede5ff;--tile-sel-border: var(--accent);--accent-dim: rgba(119, 0, 179, 0.45);--shadow: 0 18px 40px rgba(20, 10, 40, .12);--repeat-gradient: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 48px);}*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}html {scroll-behavior: smooth;}body {background: var(--bg);color: var(--text);font-family: var(--font-family);-webkit-font-smoothing: antialiased;overflow-x: hidden;}a {text-decoration: none;color: inherit;}button {cursor: pointer;font-family: inherit;border: none;background: none;}.hero {position: relative;min-height: 95vh;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 5px 24px 60px;overflow: hidden;}#block-canvas {position: absolute;inset: 0;z-index: 0;pointer-events: none;width: 100%;height: 100%;}.hero::before {content: '';position: absolute;inset: 0;z-index: 0;background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size: 48px 48px;opacity: 0.4;}.hero::after {content: '';position: absolute;inset: 0;z-index: 0;background: radial-gradient(ellipse 75% 68% at 50% 48%, transparent 12%, color-mix(in srgb, var(--bg) 75%, transparent) 45%, var(--bg) 78%);pointer-events: none;}@keyframes pulse {0%, 100% {opacity: 1;transform: scale(1) }50% {opacity: .4;transform: scale(0.75) }}.hero h1 {position: relative;z-index: 1;font-family: var(--pixel-font);font-size: clamp(16px, 3vw, 32px);line-height: 1.7;color: var(--text);max-width: 820px;margin-bottom: 20px;}.hero h1 em {font-style: normal;color: var(--accent-2);}.hero-sub {position: relative;z-index: 1;font-size: 16px;line-height: 1.7;color: var(--muted);max-width: 540px;margin-bottom: 40px;}.hero-actions {position: relative;z-index: 1;display: flex;gap: 12px;flex-wrap: wrap;justify-content: center;}.btn-primary {padding: 13px 28px;font-size: 13px;font-weight: 700;color: #fff;background: var(--accent);border-radius: var(--radius);transition: background var(--transition), transform var(--transition), box-shadow var(--transition);}.btn-primary:hover {background: color-mix(in srgb, var(--accent) 82%, black);transform: translateY(-2px);box-shadow: 0 8px 28px var(--glow);}.btn-secondary {padding: 13px 28px;font-size: 13px;font-weight: 600;color: var(--muted);background: transparent;border: 1px solid var(--line);border-radius: var(--radius);transition: border-color var(--transition), color var(--transition), transform var(--transition);}.btn-secondary:hover {border-color: var(--accent-dim);color: var(--accent-2);transform: translateY(-2px);}.hero-stats {position: relative;z-index: 1;display: flex;gap: 40px;flex-wrap: wrap;justify-content: center;margin-top: 56px;padding-top: 36px;border-top: 1px solid var(--line);width: 100%;max-width: 580px;}.stat-item {text-align: center;}.stat-num {font-family: var(--pixel-font);font-size: 18px;color: var(--accent-2);display: block;margin-bottom: 6px;}.stat-label {font-size: 12px;color: var(--muted);font-weight: 500;}.scroll-hint {position: absolute;bottom: 28px;left: 50%;transform: translateX(-50%);z-index: 1;display: flex;flex-direction: column;align-items: center;gap: 6px;font-size: 9px;font-family: var(--pixel-font);color: var(--muted);letter-spacing: 1px;opacity: 0.6;animation: bobble 2.5s ease-in-out infinite;}@keyframes bobble {0%, 100% {transform: translateX(-50%) translateY(0) }50% {transform: translateX(-50%) translateY(7px) }}.scroll-hint svg {width: 18px;height: 18px;}.features-strip {background: var(--panel);border-top: 1px solid var(--line);border-bottom: 1px solid var(--line);padding: 52px 24px;}.features-inner {max-width: 1100px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));gap: 32px;}.feat-item {display: flex;flex-direction: column;gap: 12px;}.feat-icon {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: var(--radius);background: var(--accent-glow);border: 1px solid var(--accent-dim);flex-shrink: 0;}.feat-icon svg {width: 20px;height: 20px;color: var(--accent-2);}.feat-title {font-size: 14px;font-weight: 700;color: var(--text);}.feat-body {font-size: 13px;color: var(--muted);line-height: 1.65;}.tools-section {padding: 80px 24px;max-width: 1200px;margin: 0 auto;}.section-label {font-family: var(--pixel-font);font-size: 9px;color: var(--accent);letter-spacing: 2px;margin-bottom: 12px;}.section-title {font-family: var(--pixel-font);font-size: clamp(13px, 2vw, 20px);color: var(--text);line-height: 1.55;margin-bottom: 8px;}.section-sub {font-size: 14px;color: var(--muted);margin-bottom: 36px;}.tools-search-wrap {position: relative;max-width: 500px;margin-bottom: 24px;}.tools-search-wrap svg {position: absolute;left: 14px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;color: var(--muted);pointer-events: none;}.tools-search {width: 100%;padding: 13px 14px 13px 42px;font-size: 14px;font-family: var(--font-family);color: var(--text);background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius);outline: none;transition: border-color var(--transition), box-shadow var(--transition);}.tools-search::placeholder {color: var(--muted);}.tools-search:focus {border-color: var(--accent-dim);box-shadow: 0 0 0 3px var(--accent-glow);}.filter-pills {display: flex;gap: 8px;flex-wrap: wrap;margin-bottom: 32px;font-family: var(--font-family);}.pill {padding: 6px 14px;font-size: 12px;font-weight: 600;border-radius: 100px;border: 1px solid var(--line);color: var(--muted);background: var(--panel);cursor: pointer;transition: all var(--transition);}.pill:hover, .pill.active {border-color: var(--accent);color: var(--accent-2);background: var(--accent-glow);}.tools-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));gap: 14px;}.tool-card {position: relative;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius);padding: 22px;cursor: pointer;display: flex;flex-direction: column;gap: 12px;opacity: 0;transform: translateY(28px);animation: cardIn 0.38s ease forwards;transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);}.tool-card::before {content: '';position: absolute;inset: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0%, transparent 55%);border-radius: inherit;pointer-events: none;}.tool-card::after {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, var(--accent), transparent);border-radius: var(--radius) var(--radius) 0 0;opacity: 0;transition: opacity var(--transition);}.tool-card:hover {border-color: var(--accent-dim);transform: translateY(-4px);box-shadow: var(--shadow), 0 0 28px var(--accent-glow);}.tool-card:hover::after {opacity: 1;}@keyframes cardIn {to {opacity: 1;transform: translateY(0);}}.tool-icon {width: 46px;height: 46px;border-radius: var(--radius);background: var(--panel-3);border: 1px solid var(--line);display: flex;align-items: center;justify-content: center;box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.4);}.tool-icon svg {width: 24px;height: 24px;}.tool-new-badge {position: absolute;top: 12px;right: 12px;font-size: 8px;font-weight: 700;letter-spacing: 0.5px;padding: 3px 8px;border-radius: 100px;color: var(--gold);background: rgba(246, 199, 0, 0.1);border: 1px solid rgba(246, 199, 0, 0.28);font-family: var(--pixel-font);}.tool-name {font-family: var(--pixel-font);font-size: 9px;line-height: 1.7;color: var(--text);}.tool-desc {font-size: 13px;line-height: 1.6;color: var(--muted);flex: 1;font-family: var(--font-family);}.tool-tag {font-size: 11px;font-weight: 600;color: var(--accent);display: flex;align-items: center;gap: 5px;}.tool-tag::before {content: '';display: block;width: 5px;height: 5px;border-radius: 50%;background: var(--accent);}.no-results {grid-column: 1/-1;text-align: center;padding: 60px 20px;color: var(--muted);}.no-results svg {width: 36px;height: 36px;margin-bottom: 14px;opacity: .35;display: block;margin: 0 auto 14px;}.no-results p {font-size: 14px;}.examples-section {padding: 80px 24px;background: var(--panel);border-top: 1px solid var(--line);border-bottom: 1px solid var(--line);}.examples-inner {max-width: 1100px;margin: 0 auto;}.examples-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 14px;margin-top: 32px;}.ex-card {background: var(--panel-3);border: 1px solid var(--line);border-radius: var(--radius);padding: 20px;display: flex;flex-direction: column;gap: 10px;}.ex-title {font-family: var(--pixel-font);font-size: 9px;color: var(--text);}.ex-desc {font-size: 13px;color: var(--muted);font-family: var(--font-family);}.ex-code {background: var(--bg);border: 1px solid var(--line);border-radius: var(--radius);padding: 12px;font-family: 'Courier New', monospace;font-size: 12px;line-height: 1.6;color: var(--accent-2);word-break: break-all;white-space: pre-wrap;cursor: pointer;position: relative;transition: border-color var(--transition), background var(--transition);}.ex-code:hover {border-color: var(--accent-dim);background: var(--accent-glow);}.copy-toast {position: absolute;top: 6px;right: 8px;font-size: 10px;color: var(--accent-2);opacity: 0;transition: opacity 0.2s;font-family: var(--font-family);}.ex-code.copied .copy-toast {opacity: 1;}.cta-banner {padding: 80px 24px;text-align: center;position: relative;overflow: hidden;}.cta-banner::before {content: '';position: absolute;inset: 0;background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(192, 38, 211, 0.1) 0%, transparent 70%);}.cta-banner h2 {position: relative;font-family: var(--pixel-font);font-size: clamp(13px, 2.2vw, 22px);color: var(--text);line-height: 1.6;margin-bottom: 16px;}.cta-banner p {position: relative;max-width: 500px;margin: 0 auto 32px;font-size: 15px;color: var(--muted);line-height: 1.7;}.cta-banner .actions {position: relative;display: flex;gap: 12px;flex-wrap: wrap;justify-content: center;}.faq-section {padding: 80px 24px;background: var(--panel);border-top: 1px solid var(--line);}.faq-inner {max-width: 700px;margin: 0 auto;}.faq-list {margin-top: 32px;display: flex;flex-direction: column;gap: 6px;}.faq-item {border: 1px solid var(--line);border-radius: var(--radius);background: var(--panel-3);overflow: hidden;transition: border-color var(--transition);font-family: var(--font-family);}.faq-item[open] {border-color: var(--accent-dim);}.faq-item summary {padding: 17px 20px;font-size: 14px;font-weight: 600;color: var(--text);cursor: pointer;list-style: none;display: flex;justify-content: space-between;align-items: center;gap: 12px;}.faq-item summary::-webkit-details-marker {display: none;}.faq-item summary::after {content: '+';font-size: 18px;font-weight: 300;color: var(--muted);flex-shrink: 0;transition: transform var(--transition), color var(--transition);}.faq-item[open] summary::after {transform: rotate(45deg);color: var(--accent-2);}.faq-item p {padding: 0 20px 18px;font-size: 14px;line-height: 1.7;color: var(--muted);}@media (max-width: 760px) {.hero {min-height: 80vh;margin-bottom: 100px;}}@media (max-width: 600px) {.hero h1 {font-size: 14px;}.tools-section, .examples-section, .cta-banner, .faq-section {padding: 48px 16px;}.hero-stats {gap: 20px;}}