@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');:root {--bg: #1a0d2b;--panel: #0e1627;--card: #2b1a47;--border: #3a2a5c;--muted: #b8a4d2;--accent: #c026d3;--accent-light: #d8a0ff;--text: #e6eef6;--success: #36b37e;--danger: #ff3b5c;--glass: rgba(192, 38, 211, 0.12);--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);}[data-theme="dark"] {--bg: #071021;--panel: #0f1a2e;--card: #1a2540;--border: #2a3a5c;--muted: #a8b8d0;--accent: #00d4ff;--text: #e0f0ff;--glass: rgba(0, 212, 255, 0.1);}[data-theme="light"] {--bg: #f8f9fc;--panel: #ffffff;--card: #f1f3f9;--border: #d1d5e0;--muted: #64748b;--accent: #7c3aed;--text: #0f172a;--glass: rgba(124, 58, 237, 0.08);}[data-theme="grass"] {--bg: #0f3d1f;--panel: #1a5a2f;--card: #256d3f;--border: #3a8f5a;--muted: #c8e6d0;--accent: #4ade80;--text: #f0fdf4;--glass: rgba(74, 222, 128, 0.15);}[data-theme="dirt"] {--bg: #3f2a1e;--panel: #5c3f2b;--card: #6f4e38;--border: #8c664f;--muted: #e8d5c0;--accent: #f59e0b;--text: #fef3e8;--glass: rgba(245, 158, 11, 0.15);}[data-theme="sky"] {--bg: #0c2a4d;--panel: #1e4a7c;--card: #2b5f9e;--border: #4a8ad4;--muted: #c0d6f0;--accent: #60a5fa;--text: #f0f9ff;--glass: rgba(96, 165, 250, 0.15);}* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;background: var(--bg);color: var(--text);display: flex;flex-direction: column;}.landing-page {display: flex;width: 100%;background: var(--bg);overflow-x: hidden;flex-direction: column;justify-content: center;justify-items: center;}.background-gradient {background: var(--repeat-gradient);}.center {width: 100%;margin: 0 auto;padding: clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px);}.about-hero {text-align: center;padding: clamp(5px, 2vw, 10px) clamp(12px, 2vw, 20px);}.about-hero h1 {font-size: clamp(1.5rem, 4vw, 2rem);margin-bottom: clamp(12px, 2vw, 20px);width: 100%;}.about-hero p {font-size: clamp(0.9rem, 2.5vw, 1.1rem);max-width: 600px;margin: 0 auto clamp(16px, 3vw, 30px);color: var(--muted);}.cta-buttons {display: flex;gap: clamp(12px, 2vw, 16px);justify-content: center;flex-wrap: wrap;}.cta-button {padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px);font-size: clamp(1rem, 2vw, 1.1rem);font-weight: 600;color: var(--text);background: var(--accent);border: none;border-radius: 6px;cursor: pointer;transition: background 0.3s ease, transform 0.2s ease;}.cta-button:hover, .cta-button:focus {transform: translateY(-5px);box-shadow: 0 5px 15px var(--glass);}.cta-button.secondary {background: var(--card);border: 1px solid var(--glass);color: var(--text);}.hero-section {min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 80px 20px;position: relative;}.hero-section::before {content: "";position: absolute;inset: 0;background: radial-gradient(circle at top, rgba(192, 38, 211, 0.15), transparent 45%);pointer-events: none;}.landing-content {display: flex;flex-direction: column;text-align: center;position: relative;z-index: 2;}.hero-title {font-size: 4rem;margin-bottom: 16px;line-height: 1;font-weight: 800;}.hero-subtitle {font-size: 1.25rem;color: var(--muted);margin-bottom: 40px;line-height: 1.7;}.hero-emoji {font-size: 4rem;margin-bottom: 16px;}.hero-buttons {margin-top: 30px;}.hero-button {font-size: 1.1rem;padding: 14px 32px;}@media(max-width:768px) {.hero-title {font-size: 2.8rem;}.hero-subtitle {font-size: 1.05rem;}.upload-box {padding: 40px 20px;min-height: 240px;}}.spinner {width: 48px;height: 48px;border: 5px solid var(--panel);border-top: 5px solid var(--accent);border-radius: 50%;animation: spin 1s linear infinite;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.upload-box {border: 3px dashed var(--accent);border-radius: 16px;padding: 20px 40px;margin: 5px auto;cursor: pointer;transition: all 0.3s;background: var(--panel);min-height: 280px;display: flex;align-items: center;justify-content: center;}.upload-box:hover {background: var(--card);border-color: #c026d3;transform: scale(1.02);}.upload-box.loading {cursor: wait;pointer-events: none;}.main-app {display: none;flex-direction: column;height: 100vh;}.preloader {background: var(--panel);border-bottom: 2px solid var(--accent);padding: 12px 20px;display: flex;align-items: center;gap: 15px;box-shadow: 0 4px 12px rgba(161, 0, 161, 0.15);flex-shrink: 0;}.toolbar {display: flex;gap: 10px;flex-wrap: wrap;}button {background: var(--card);color: var(--text);border: none;padding: 8px 16px;border-radius: 8px;font-weight: 600;cursor: pointer;transition: all 0.2s;display: flex;align-items: center;gap: 6px;}button:hover {background: var(--accent);color: #fff;transform: translateY(-1px);}.btn-primary {background: var(--accent);color: #fff;font-weight: 700;}main {flex: 1;display: flex;overflow: hidden;min-height: 80vh;max-height: 80vh;}.sidebar {width: 240px;background: var(--panel);border-right: 1px solid #2b1a47;padding: 20px;display: flex;flex-direction: column;gap: 20px;flex-shrink: 0;overflow-y: auto;}.tree-panel {flex: 1;display: flex;flex-direction: column;border-right: 1px solid #2b1a47;min-width: 300px;overflow: hidden;}.panel-header {padding: 12px 20px;background: var(--card);border-bottom: 1px solid #2b1a47;display: flex;justify-content: space-between;align-items: center;font-weight: 600;flex-shrink: 0;}#tree {flex: 1;padding: 12px 20px;overflow-y: auto;font-size: 15px;line-height: 1.5;scrollbar-width: thin;scrollbar-color: #5a4a7a var(--panel);}#tree details {margin-left: 0;}#tree details>div {margin-left: 28px;border-left: 2px solid #2b1a47;padding-left: 12px;}#tree details details>div {margin-left: 36px;}#tree details details details>div {margin-left: 44px;}summary {cursor: pointer;padding: 6px 10px;border-radius: 6px;display: flex;align-items: center;gap: 8px;user-select: none;margin-bottom: 2px;}summary:hover {background: rgba(161, 0, 161, 0.15);}#search-input {background: var(--card);padding: 6px 12px;border-radius: 9999px;width: 220px;font-size: 14px;display: none;color: var(--text);border: 1px solid var(--glass);}.primitive {margin: 3px 0 3px 4px;padding: 5px 10px;border-radius: 6px;background: rgba(43, 26, 71, 0.6);}.primitive:hover {background: var(--card);}summary .tag-name {font-weight: 600;color: var(--text);}.tag-icon {width: 22px;text-align: center;font-size: 18px;}.tag-value {margin-left: 8px;font-family: monospace;}.tag-value:hover {color: var(--muted);}#tree::-webkit-scrollbar, #hex-view::-webkit-scrollbar, textarea::-webkit-scrollbar, #guide-modal .modal-content::-webkit-scrollbar {width: 8px;height: 8px;}#tree::-webkit-scrollbar-thumb, #hex-view::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, #guide-modal .modal-content::-webkit-scrollbar-thumb {background: #5a4a7a;border-radius: 20px;}#tree::-webkit-scrollbar-thumb:hover, #hex-view::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, #guide-modal .modal-content::-webkit-scrollbar-thumb:hover {background: #7a6aa0;}#tree::-webkit-scrollbar-track, #hex-view::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, #guide-modal .modal-content::-webkit-scrollbar-track {background: var(--panel);}.side-panel {flex: 1;display: flex;flex-direction: column;min-height: 0;overflow: hidden;background: var(--panel);}.tab-bar {display: flex;border-bottom: 1px solid #2b1a47;flex-shrink: 0;}.tab {flex: 1;padding: 12px;text-align: center;cursor: pointer;font-weight: 600;}.tab.active {background: var(--card);border-bottom: 3px solid var(--accent);}.tab-content {flex: 1;display: none;flex-direction: column;min-height: 0;overflow: hidden;}.tab-content.active {display: flex;}#tab-content-2 {flex: 1;flex-direction: column;min-height: 0;overflow: hidden;padding: 10px;background: #0a0614;}#hex-view {flex: 1;overflow-y: auto;overflow-x: auto;background: #0a0614;padding: 12px 16px;font-family: 'SF Mono', Monaco, Consolas, monospace;font-size: 13.5px;line-height: 1.55;color: #d4c8ff;white-space: pre;border-radius: 8px;border: 1px solid #2b1a47;scrollbar-color: #5a4a7a var(--panel);}#snbt-editor {flex: 1;padding: 15px;display: flex;flex-direction: column;overflow: hidden;}textarea {flex: 1;background: var(--bg);color: var(--text);border: 1px solid #2b1a47;border-radius: 8px;padding: 14px;font-family: "SF Mono", monospace;font-size: 14px;resize: none;line-height: 1.5;}.status-bar {height: 32px;background: var(--panel);display: flex;align-items: center;padding: 0 20px;font-size: 13px;color: var(--muted);border-top: 1px solid #2b1a47;flex-shrink: 0;}.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.85);display: none;align-items: center;justify-content: center;z-index: 1000;}.modal-content {background: var(--panel);max-width: 520px;width: 90%;border-radius: 16px;padding: 24px;box-shadow: 0 20px 40px rgba(161, 0, 161, 0.3);}.toast {position: fixed;bottom: 20px;right: 20px;background: var(--success);color: #000;padding: 14px 24px;border-radius: 9999px;box-shadow: 0 10px 30px rgba(54, 179, 126, 0.4);display: none;align-items: center;gap: 10px;font-weight: 600;z-index: 1100;}.type-badge {font-size: 11px;padding: 2px 8px;border-radius: 9999px;background: var(--card);color: var(--accent);font-family: monospace;}#guide-modal {display: none;}#guide-modal .modal-content {background: var(--panel);max-width: 620px;max-height: 85vh;overflow-y: auto;position: relative;padding: 24px;border-radius: 16px;box-shadow: 0 20px 40px rgba(161, 0, 161, 0.3);scrollbar-width: thin;scrollbar-color: #5a4a7a var(--panel);}.theme-option {padding: 16px 12px;background: var(--card);border: 2px solid transparent;border-radius: 10px;text-align: center;cursor: pointer;transition: all 0.2s;font-size: 14px;}.theme-option:hover {background: var(--panel);transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);color: var(--accent);}.theme-option.active {border-color: var(--accent);background: var(--glass);box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.2);}.main-loader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(15, 17, 23, 0.30);display: none;align-items: center;justify-content: center;z-index: 9999;backdrop-filter: blur(4px);}.loader-content {text-align: center;color: var(--text);}.spinner {border: 5px solid #2a3344;border-top: 5px solid var(--accent);border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto;}.upload-box.dragging {border-color: #00ff9d;background: rgba(0, 255, 157, 0.08);transform: scale(1.01);}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.features {margin-bottom: 70px;}.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 22px;}.feature-card {background: var(--card);border: 1px solid rgba(255, 255, 255, 0.06);border-radius: 24px;padding: 28px;transition: 0.28s ease;position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;}.feature-card::before {content: "";position: absolute;width: 220px;height: 220px;top: -120px;right: -120px;background: radial-gradient(circle, rgba(0, 255, 157, 0.12), transparent 70%);pointer-events: none;}.feature-card:hover {transform: translateY(-4px);border-color: var(--accent);}.feature-icon {width: 62px;height: 62px;border-radius: 18px;background: var(--accent);display: flex;align-items: center;justify-content: center;font-size: 28px;margin-bottom: 20px;}.feature-card h3 {font-size: 1.2rem;margin-bottom: 12px;}.feature-card p {color: var(--muted);line-height: 1.8;font-size: 0.98rem;}.seo-shell {width: 100%;max-width: 1200px;margin: 80px auto 0;padding: 0 20px 80px;}.section-heading {text-align: center;margin-bottom: 40px;}.section-heading h2 {font-size: 2.2rem;margin-bottom: 12px;}.section-heading p {color: var(--muted);}.content-block {margin-bottom: 90px;}.content-block h2 {font-size: 2.6rem;margin-bottom: 20px;text-align: center;}.content-block p {color: var(--muted);margin-bottom: 18px;line-height: 1.9;font-size: 1.05rem;}.file-types {margin-bottom: 90px;}.file-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;}.file-card {background: var(--card);border: 1px solid rgba(255, 255, 255, 0.05);border-radius: 22px;padding: 24px;transition: 0.25s ease;display: flex;flex-direction: column;justify-content: center;align-items: center;}.file-card:hover {border-color: var(--accent);transform: translateY(-3px);}.file-tag {display: inline-block;padding: 6px 12px;border-radius: 999px;background: var(--accent);color: var(--accent-light);font-size: 12px;margin-bottom: 18px;}.file-card h3 {margin-bottom: 12px;}.file-card p {color: var(--muted);line-height: 1.8;}.steps-section {margin-bottom: 90px;}.steps-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 20px;}.step-card {background: var(--card);border-radius: 24px;padding: 28px;position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;}.step-number {width: 42px;height: 42px;border-radius: 50%;background: var(--accent);color: var(--accent-light);font-weight: bold;display: flex;align-items: center;justify-content: center;margin-bottom: 18px;}.step-card p {color: var(--muted);line-height: 1.8;}.content-split {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 24px;margin-bottom: 90px;}.content-panel {background: var(--card);border-radius: 24px;padding: 30px;border: 1px solid rgba(255, 255, 255, 0.05);}.content-panel h2 {margin-bottom: 18px;}.content-panel p {color: var(--muted);line-height: 1.9;}.feature-strip {display: flex;flex-wrap: wrap;gap: 14px;justify-content: center;margin-bottom: 90px;}.feature-pill {padding: 12px 18px;background: var(--accent);border-radius: 999px;border: 1px solid rgba(255, 255, 255, 0.06);font-size: 14px;}.faq-section {margin-bottom: 60px;}.faq-container {display: flex;flex-direction: column;gap: 14px;}.faq-item {background: var(--card);border-radius: 18px;border: 1px solid rgba(255, 255, 255, 0.05);overflow: hidden;}.faq-item summary {cursor: pointer;padding: 22px 24px;font-weight: 600;list-style: none;position: relative;}.faq-item summary::-webkit-details-marker {display: none;}.faq-item summary::after {content: "+";position: absolute;right: 24px;top: 20px;font-size: 22px;color: var(--muted);}.faq-item[open] summary::after {content: "−";}.faq-item p {padding: 0 24px 24px;color: var(--muted);line-height: 1.8;}@media (max-width:768px) {.content-block h2, .section-heading h2 {font-size: 2rem;}.seo-shell {margin-top: 50px;}}@media (max-width: 1100px) {main {flex-direction: column;}.sidebar, .tree-panel {display: none;}.side-panel {flex: 1;width: 100%;}.mobile-nav {display: flex;background: var(--panel);border-top: 1px solid #2b1a47;position: fixed;bottom: 0;left: 0;right: 0;z-index: 200;box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);}.mobile-nav button {flex: 1;padding: 12px 8px 8px;background: transparent;border: none;color: var(--muted);font-size: 13px;display: flex;flex-direction: column;align-items: center;gap: 4px;transition: all 0.2s;}.mobile-nav button:hover {color: var(--text);}.mobile-nav button.active {color: var(--accent);background: var(--glass);}#snbt-editor {margin-bottom: 50px;}}@media (max-width: 1100px) {#snbt-editor {margin-bottom: 75px;}}@media (min-width: 1101px) {.mobile-nav {display: none;}}.tree-panel, .sidebar {transition: all 0.3s ease;}