@import "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Geist:wght@300;400;500;600;700&display=swap";
.header{z-index:200;border-bottom:1px solid var(--color-border);background:var(--color-bg-header);-webkit-backdrop-filter:blur(24px)saturate(180%);transition:background .35s,border-color .35s;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1200px;height:64px;margin:0 auto;padding:0 24px;display:flex}.logo{color:var(--color-text);flex-shrink:0;align-items:center;gap:10px;text-decoration:none;transition:opacity .15s;display:flex}.logo:hover{opacity:.75}.logo-icon{background:var(--color-accent);border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;transition:transform .2s,background .35s;display:flex}.logo:hover .logo-icon{transform:rotate(8deg)scale(1.06)}.logo-icon svg{fill:var(--color-text-inverse);transition:fill .35s}.logo-name{letter-spacing:-.3px;font-size:15px;font-weight:600}.logo-badge{background:var(--color-accent-soft);border:1px solid var(--color-border-bright);color:var(--color-text-muted);letter-spacing:.05em;border-radius:4px;padding:2px 6px;font-family:Geist Mono,monospace;font-size:10px;font-weight:500;transition:background .35s,border-color .35s,color .35s}.nav-desktop{align-items:center;gap:4px;display:flex}.nav-desktop>a{color:var(--color-text-muted);white-space:nowrap;border-radius:8px;padding:6px 12px;font-size:13px;text-decoration:none;transition:color .15s,background .15s}.nav-desktop>a:hover{color:var(--color-text);background:var(--color-accent-soft)}.theme-switcher{position:relative}.btn-theme{background:var(--color-accent-soft);border:1px solid var(--color-border-bright);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:7px;padding:7px 12px;font-family:Geist,sans-serif;font-size:13px;font-weight:500;transition:all .15s;display:flex}.btn-theme:hover{background:var(--color-accent-soft-hover);color:var(--color-text)}.btn-theme.open{color:var(--color-text);border-color:var(--color-text-muted)}.btn-theme-chevron{opacity:.6;font-size:10px;transition:transform .2s}.btn-theme.open .btn-theme-chevron{transform:rotate(180deg)}.theme-dropdown{background:var(--color-surface);border:1px solid var(--color-border-bright);z-index:300;border-radius:10px;min-width:140px;animation:.18s dropIn;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 8px 30px #0000004d}.theme-option{width:100%;color:var(--color-text-muted);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:10px 14px;font-family:Geist,sans-serif;font-size:13px;transition:background .12s,color .12s;display:flex}.theme-option:hover{background:var(--color-accent-soft);color:var(--color-text)}.theme-option.active{color:var(--color-text)}.theme-option-icon{text-align:center;width:18px;font-size:14px}.theme-option-check{color:var(--color-success);margin-left:auto;font-size:11px}.burger{border:1px solid var(--color-border-bright);cursor:pointer;background:0 0;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;padding:0;transition:background .15s,border-color .35s;display:none}.burger:hover{background:var(--color-accent-soft)}.burger-line{background:var(--color-text-muted);transform-origin:50%;border-radius:2px;width:16px;height:1.5px;transition:transform .25s,opacity .2s,width .2s,background .35s}.burger.open .burger-line:first-child{transform:translateY(6.5px)rotate(45deg)}.burger.open .burger-line:nth-child(2){opacity:0;width:0}.burger.open .burger-line:nth-child(3){transform:translateY(-6.5px)rotate(-45deg)}.mobile-menu{z-index:190;background:var(--color-bg-header);border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(20px);transform-origin:top;padding:8px 24px 24px;display:none;position:fixed;top:64px;left:0;right:0}.mobile-menu.open{animation:.22s forwards menuSlide;display:block}.mobile-menu>a{color:var(--color-text-muted);border-bottom:1px solid var(--color-border);padding:15px 0;font-size:16px;text-decoration:none;transition:color .15s,padding-left .15s;display:block}.mobile-menu>a:hover{color:var(--color-text);padding-left:6px}.mobile-theme-section{padding-top:18px}.mobile-theme-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:10px;font-family:Geist Mono,monospace;font-size:11px}.mobile-theme-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.mobile-theme-btn{border:1px solid var(--color-border-bright);background:var(--color-accent-soft);color:var(--color-text-muted);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;font-family:Geist,sans-serif;font-size:11px;transition:all .15s;display:flex}.mobile-theme-btn:hover,.mobile-theme-btn.active{background:var(--color-accent-soft-hover);color:var(--color-text);border-color:var(--color-text-muted)}.mobile-theme-btn-icon{font-size:16px}
footer{border-top:1px solid var(--color-border);background:var(--color-bg);transition:background .35s,border-color .35s}.footer-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1200px;height:60px;margin:0 auto;padding:0 24px;display:flex}.footer-text{color:var(--color-text-dim);font-family:Geist Mono,monospace;font-size:12px;transition:color .35s}.footer-links{gap:20px;display:flex}.footer-links a{color:var(--color-text-dim);font-size:12px;text-decoration:none;transition:color .15s}.footer-links a:hover{color:var(--color-text-muted)}@media (max-width:768px){.nav-desktop{display:none}.burger{display:flex}main{padding:40px 16px 60px}.hero{margin-bottom:40px}.hero h1{letter-spacing:-1.5px}.hero p{font-size:15px}.converter{grid-template-columns:1fr;gap:12px}textarea,.output-pre{min-height:220px;padding:16px;font-size:12px}.actions{gap:8px}.btn-convert{justify-content:center;width:100%;padding:13px 22px}.btn-secondary{text-align:center;flex:1;padding:10px 12px;font-size:12px}.features{grid-template-columns:1fr;gap:10px;margin-top:40px}.footer-inner{flex-direction:column;align-items:flex-start;gap:10px;height:auto;padding:16px 24px}}@media (max-width:480px){.header-inner{padding:0 16px}.logo-badge{display:none}main{padding:28px 16px 40px}.panel-header{padding:10px 12px}.mobile-theme-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
:root,:root[data-theme=dark]{--color-bg:#000;--color-bg-header:#000000e0;--color-surface:#0a0a0a;--color-border:#1a1a1a;--color-border-bright:#2e2e2e;--color-text:#ededed;--color-text-muted:#888;--color-text-dim:#444;--color-text-inverse:#000;--color-accent:#ededed;--color-accent-soft:#ffffff0d;--color-accent-soft-hover:#ffffff17;--color-success:#00c96f;--color-success-bg:#00c96f14;--color-success-border:#00c96f38;--color-error:#ff4040;--color-error-bg:#ff40400f;--color-error-border:#ff404038;--color-code-json:#f7e272;--color-code-yaml:#7dd3fc;--color-dot-json:#f7e272;--color-dot-json-glow:#f7e27259;--color-dot-yaml:#7dd3fc;--color-dot-yaml-glow:#7dd3fc59;--color-panel-output-border:#7dd3fc33;--color-panel-output-glow:#7dd3fc0a;--color-shimmer-a:#ededed;--color-shimmer-b:#aaa}:root[data-theme=light]{--color-bg:#fff;--color-bg-header:#ffffffe0;--color-surface:#fafafa;--color-border:#e5e5e5;--color-border-bright:#d0d0d0;--color-text:#111;--color-text-muted:#666;--color-text-dim:#aaa;--color-text-inverse:#fff;--color-accent:#111;--color-accent-soft:#0000000a;--color-accent-soft-hover:#00000014;--color-success:#008a4b;--color-success-bg:#008a4b12;--color-success-border:#008a4b38;--color-error:#c20;--color-error-bg:#cc22000f;--color-error-border:#c203;--color-code-json:#a16207;--color-code-yaml:#1d4ed8;--color-dot-json:#ca8a04;--color-dot-json-glow:#ca8a044d;--color-dot-yaml:#3b82f6;--color-dot-yaml-glow:#3b82f64d;--color-panel-output-border:#3b82f633;--color-panel-output-glow:#3b82f60a;--color-shimmer-a:#111;--color-shimmer-b:#555}:root[data-theme=nord]{--color-bg:#2e3440;--color-bg-header:#2e3440eb;--color-surface:#3b4252;--color-border:#434c5e;--color-border-bright:#4c566a;--color-text:#eceff4;--color-text-muted:#9199aa;--color-text-dim:#616d82;--color-text-inverse:#2e3440;--color-accent:#eceff4;--color-accent-soft:#eceff40f;--color-accent-soft-hover:#eceff41c;--color-success:#a3be8c;--color-success-bg:#a3be8c1a;--color-success-border:#a3be8c4d;--color-error:#bf616a;--color-error-bg:#bf616a1a;--color-error-border:#bf616a4d;--color-code-json:#ebcb8b;--color-code-yaml:#88c0d0;--color-dot-json:#ebcb8b;--color-dot-json-glow:#ebcb8b59;--color-dot-yaml:#88c0d0;--color-dot-yaml-glow:#88c0d059;--color-panel-output-border:#88c0d040;--color-panel-output-glow:#88c0d00f;--color-shimmer-a:#eceff4;--color-shimmer-b:#81a1c1}:root[data-theme=rose]{--color-bg:#0d0608;--color-bg-header:#0d0608e6;--color-surface:#130a0d;--color-border:#2a1520;--color-border-bright:#3d1f2d;--color-text:#f5dde4;--color-text-muted:#9d7585;--color-text-dim:#5a3d47;--color-text-inverse:#0d0608;--color-accent:#f5dde4;--color-accent-soft:#f5dde40f;--color-accent-soft-hover:#f5dde41a;--color-success:#c084a0;--color-success-bg:#c084a01a;--color-success-border:#c084a047;--color-error:#ff6b7a;--color-error-bg:#ff6b7a14;--color-error-border:#ff6b7a40;--color-code-json:#f0a896;--color-code-yaml:#e8a2bc;--color-dot-json:#f0a896;--color-dot-json-glow:#f0a89659;--color-dot-yaml:#e8a2bc;--color-dot-yaml-glow:#e8a2bc59;--color-panel-output-border:#e8a2bc38;--color-panel-output-glow:#e8a2bc0d;--color-shimmer-a:#f5dde4;--color-shimmer-b:#c084a0}:root[data-theme=matrix]{--color-bg:#000d00;--color-bg-header:#000d00eb;--color-surface:#010f01;--color-border:#0a2a0a;--color-border-bright:#0f3d0f;--color-text:#b3ffb3;--color-text-muted:#52a352;--color-text-dim:#2a5a2a;--color-text-inverse:#000d00;--color-accent:#00ff41;--color-accent-soft:#00ff410d;--color-accent-soft-hover:#00ff4117;--color-success:#00ff41;--color-success-bg:#00ff4112;--color-success-border:#00ff4140;--color-error:#ff4141;--color-error-bg:#ff414112;--color-error-border:#ff414138;--color-code-json:#af4;--color-code-yaml:#00e5ff;--color-dot-json:#af4;--color-dot-json-glow:#af46;--color-dot-yaml:#00e5ff;--color-dot-yaml-glow:#00e5ff66;--color-panel-output-border:#00e5ff33;--color-panel-output-glow:#00e5ff0d;--color-shimmer-a:#b3ffb3;--color-shimmer-b:#00ff41}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:Geist,-apple-system,sans-serif;transition:background .35s,color .35s;overflow-x:hidden}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes errorShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes successPop{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}@keyframes menuSlide{0%{opacity:0;transform:translateY(-8px)scaleY(.96)}to{opacity:1;transform:translateY(0)scaleY(1)}}@keyframes dropIn{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.page-wrapper{animation:.35s fadeIn}