@font-face {font-family: "Poppins";font-style: normal;font-weight: 300;font-display: swap;src: url("fonts/poppins-v20-latin-300.woff2") format("woff2");}@font-face {font-family: "Poppins";font-style: normal;font-weight: 400;font-display: swap;src: url("fonts/poppins-v20-latin-regular.woff2") format("woff2");}@font-face {font-family: "Poppins";font-style: normal;font-weight: 500;font-display: swap;src: url("fonts/poppins-v20-latin-500.woff2") format("woff2");}@font-face {font-family: "Poppins";font-style: normal;font-weight: 600;font-display: swap;src: url("fonts/poppins-v20-latin-600.woff2") format("woff2");}@font-face {font-family: "Fira Code";font-style: normal;font-weight: 400;font-display: swap;src: url("fonts/fira-code-v20-latin-regular.woff2") format("woff2");}@font-face {font-family: "Fira Code";font-style: normal;font-weight: 500;font-display: swap;src: url("fonts/fira-code-v20-latin-500.woff2") format("woff2");}:root {--bg-main: #121212;--panel-bg: #1e1e24;--accent: #4361ee;--accent-hover: #3f37c9;--text-main: #ffffff;--text-muted: #a0a0b0;--border: rgba(255, 255, 255, 0.08);}* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-family: "Poppins", sans-serif;}body {background-color: var(--bg-main);color: var(--text-main);min-height: 100vh;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;overflow-x: hidden;-webkit-transition: background 0.5s ease;-o-transition: background 0.5s ease;transition: background 0.5s ease;}.site-header {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding-top: 2rem;position: relative;z-index: 100;}.logo {font-size: 2rem;font-weight: 600;letter-spacing: -1px;background: -webkit-linear-gradient(315deg, #4361ee, #4cc9f0);background: -o-linear-gradient(315deg, #4361ee, #4cc9f0);background: linear-gradient(135deg, #4361ee, #4cc9f0);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 1.5rem;}.toggle-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: -webkit-sticky;position: sticky;top: 1rem;z-index: 100;}.segmented-control {background: rgba(30, 30, 36, 0.7);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);padding: 6px;border-radius: 20px;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: 5px;-webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);border: 1px solid var(--border);}.tab-btn {all: unset;padding: 10px 20px;color: var(--text-muted);border-radius: 14px;font-size: 0.9rem;font-weight: 500;cursor: pointer;-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 8px;}.tab-btn svg {width: 18px;height: 18px;fill: currentColor;-webkit-transition: -webkit-transform 0.3s ease;transition: -webkit-transform 0.3s ease;-o-transition: transform 0.3s ease;transition: transform 0.3s ease;transition: transform 0.3s ease, -webkit-transform 0.3s ease;}.tab-btn:hover {color: var(--text-main);}.tab-btn.active {background: var(--accent);color: #fff;-webkit-box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);}.tab-btn.active svg {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}.tab-btn:focus-visible {outline: 2px solid var(--accent);outline-offset: 2px;}.container {max-width: 1200px;margin: 0 auto;width: 100%;padding: 2rem;display: grid;grid-template-columns: 1fr 420px;gap: 3rem;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}.preview-section {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: 30px;min-height: 500px;overflow: hidden;border: 1px solid var(--border);-webkit-transition: background 0.5s ease;-o-transition: background 0.5s ease;transition: background 0.5s ease;}.deco-blob {position: absolute;border-radius: 50%;-webkit-filter: blur(40px);filter: blur(40px);z-index: 0;opacity: 0;-webkit-transition: opacity 0.3s;-o-transition: opacity 0.3s;transition: opacity 0.3s;}.blob-1 {width: 250px;height: 250px;background: #ff007f;top: 10%;left: 15%;}.blob-2 {width: 300px;height: 300px;background: #00f0ff;bottom: 10%;right: 10%;}.floating-emoji {position: absolute;font-size: 4rem;z-index: 1;opacity: 0;-webkit-transition: opacity 0.3s;-o-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-animation: float 6s ease-in-out infinite;animation: float 6s ease-in-out infinite;}.emoji-1 {top: 20%;left: 20%;}.emoji-2 {bottom: 25%;right: 25%;-webkit-animation-delay: 2s;animation-delay: 2s;}@-webkit-keyframes float {0% {-webkit-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(-20px) rotate(10deg);transform: translateY(-20px) rotate(10deg);}100% {-webkit-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);}}@keyframes float {0% {-webkit-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);}50% {-webkit-transform: translateY(-20px) rotate(10deg);transform: translateY(-20px) rotate(10deg);}100% {-webkit-transform: translateY(0px) rotate(0deg);transform: translateY(0px) rotate(0deg);}}#main-preview {z-index: 10;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;color: #fff;font-size: 1.5rem;font-weight: 600;letter-spacing: 1px;text-align: center;}.controls-card {background: var(--panel-bg);border-radius: 24px;padding: 2rem;border: 1px solid var(--border);height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;-webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);}.control-group {margin-bottom: 1.5rem;}.label-row {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-bottom: 0.8rem;font-size: 0.85rem;color: var(--text-muted);font-weight: 500;}.label-row label {cursor: pointer;}input[type="range"] {width: 100%;height: 6px;background: rgba(255, 255, 255, 0.1);border-radius: 5px;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%;background: var(--accent);cursor: pointer;-webkit-box-shadow: 0 0 10px rgba(67, 97, 238, 0.5);box-shadow: 0 0 10px rgba(67, 97, 238, 0.5);-webkit-transition: -webkit-transform 0.1s;transition: -webkit-transform 0.1s;transition: transform 0.1s;transition: transform 0.1s, -webkit-transform 0.1s;}input[type="range"]::-moz-range-thumb {width: 18px;height: 18px;border: 0;border-radius: 50%;background: var(--accent);cursor: pointer;box-shadow: 0 0 10px rgba(67, 97, 238, 0.5);transition: transform 0.1s;}input[type="range"]::-webkit-slider-thumb:active {-webkit-transform: scale(1.2);transform: scale(1.2);}input[type="range"]::-moz-range-thumb:active {transform: scale(1.2);}.color-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;margin-top: 10px;}.color-input-wrapper {background: rgba(0, 0, 0, 0.2);padding: 10px 12px;border-radius: 12px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 10px;border: 1px solid var(--border);font-size: 0.8rem;color: var(--text-muted);white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;}.color-input-wrapper label {cursor: pointer;display: block;width: 100%;}input[type="color"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 28px;height: 28px;border: none;border-radius: 50%;cursor: pointer;background: none;padding: 0;-ms-flex-negative: 0;flex-shrink: 0;}input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;}input[type="color"]::-webkit-color-swatch {border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.2);}input[type="color"]::-moz-color-swatch {border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.2);}.checkbox-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 10px;margin-top: 1.5rem;cursor: pointer;font-size: 0.9rem;color: var(--text-muted);}.checkbox-wrapper input {width: 18px;height: 18px;accent-color: var(--accent);cursor: pointer;}.shadow-dirs {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-top: 15px;}.dir-btn {background: rgba(0, 0, 0, 0.2);border: 1px solid var(--border);color: var(--text-muted);padding: 10px;border-radius: 10px;cursor: pointer;font-size: 1.2rem;-webkit-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.dir-btn.active {background: var(--accent);color: white;border-color: var(--accent);}.code-container {margin-top: 2.5rem;position: relative;padding-top:20px;background: #0d0d12;border-radius: 16px;border: 1px solid var(--border);}.code-title {font-size: 0.85rem;color: var(--text-muted);margin-bottom: 10px;font-weight: 500;margin-left:20px;}.code-block {background: #0d0d12;padding: 1.5rem;padding-top:7px;border-radius: 16px;overflow-x: auto;}.code-block code {font-family: "Fira Code", "Courier New", monospace;font-size: 0.85rem;color: #a5b4fc;line-height: 1.7;white-space: pre-wrap;}.copy-btn {position: absolute;top: 5%;right: 15px;background: rgba(255, 255, 255, 0.1);-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);border: 1px solid var(--border);color: white;padding: 6px 14px;border-radius: 8px;font-size: 0.75rem;cursor: pointer;-webkit-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 6px;}.copy-btn svg {width: 12px;height: 12px;fill: currentColor;}.copy-btn:hover {background: var(--accent);border-color: var(--accent);-webkit-transform: translateY(-2px);-ms-transform: translateY(-2px);transform: translateY(-2px);}.copy-btn.copied {background: #10b981;border-color: #10b981;color: white;}.toast {position: fixed;bottom: 40px;left: 50%;-webkit-transform: translateX(-50%) translateY(100px);-ms-transform: translateX(-50%) translateY(100px);transform: translateX(-50%) translateY(100px);background: rgba(30, 30, 36, 0.9);border: 1px solid var(--border);color: white;padding: 12px 24px;border-radius: 30px;font-size: 0.9rem;font-weight: 500;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 10px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);z-index: 1000;}.toast.show {-webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0);opacity: 1;visibility: visible;}.toast svg {width: 18px;height: 18px;fill: #10b981;}.site-footer {width: 100%;padding: 1rem 1.5rem;margin-top: auto;background-color: #121212;border-top: 1px solid rgba(255, 255, 255, 0.03);display: flex;justify-content: center;align-items: center;}.footer-container {display: flex;align-items: center;}.footer-text {color: rgba(255, 255, 255, 0.3);font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size: 0.8rem;font-weight: 400;letter-spacing: 0.06em;text-transform: lowercase;transition: color 0.2s ease;}.heart-accent {color: rgba(255, 255, 255, 0.35);display: inline-block;margin: 0 0.2rem;font-size: 0.85rem;transition: color 0.2s ease, transform 0.2s ease;}.site-footer:hover .footer-text {color: rgba(255, 255, 255, 0.45);}.site-footer:hover .heart-accent {color: #ff4a5a;transform: scale(1.08);}.hl-prop {color: #cbd5e1;}.hl-func {color: #60a5fa;}.hl-num {color: #38bdf8;}.hl-hex {color: #fb7185;}.hl-kwd {color: #c084fc;}.hl-punc {color: #64748b;}@media (max-width: 968px) {.container {grid-template-columns: 1fr;padding: 1rem;}.tab-btn span {display: none;}.tab-btn {padding: 12px;}}#preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: #121212;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 99999;transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s ease;}.spinner-container {position: relative;width: 80px;height: 80px;}.spinner-container .gradient-spinner {width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(from 0deg, transparent 30%, #4361ee);-webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);mask: radial-gradient(circle, transparent 58%, #000 60%);animation: spin 0.8s linear infinite;}.spinner-container div:nth-child(2) {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;background-color: #4361ee;border-radius: 50%;box-shadow: 0 0 12px #4361ee, 0 0 20px #4361ee;}.pulse-text {margin-top: 2rem;color: #ffffff;font-family: "Poppins", sans-serif;font-size: 0.75rem;font-weight: 500;letter-spacing: 4px;text-transform: uppercase;opacity: 0.8;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.preloader-hidden {opacity: 0 !important;visibility: hidden !important;}