:root{--bg:#f6fbfa;--surface:rgba(255,255,255,.9);--ink:#102b38;--muted:#71899a;--line:#d7e9eb;--accent:#05ae91;--accent-dark:#008b7b;--soft:#e4f8f3;--danger:#b84b47;--shadow:0 22px 48px rgba(56,132,147,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif}.ambient{position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(1px);opacity:.65;animation:drift 15s ease-in-out infinite alternate}.ambient-one{width:45vw;height:42vw;top:10vh;left:-18vw;background:radial-gradient(ellipse at center,#b9f6f0,transparent 70%)}.ambient-two{width:48vw;height:32vw;right:-17vw;top:-8vw;background:radial-gradient(ellipse at center,#b4f2e7,transparent 70%);animation-delay:-4s}.ambient-three{width:50vw;height:35vw;right:-20vw;bottom:-14vw;background:radial-gradient(ellipse at center,#d9f9f2,transparent 70%);animation-delay:-8s}.ambient:after{content:"";position:absolute;inset:30%;border-radius:50%;background:rgba(255,255,255,.25);animation:pulse 7s ease-in-out infinite}button,textarea{font:inherit}button{cursor:pointer}.page-shell{width:100%;max-width:none;margin:auto;padding:25px clamp(22px,5vw,80px) 22px;min-height:100vh;display:flex;flex-direction:column}.topbar,footer{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.02;letter-spacing:-.03em}.brand img{width:43px;height:43px;object-fit:cover;border-radius:13px;animation:logoFloat 5s ease-in-out infinite}.brand strong{font-size:17px;font-weight:700;letter-spacing:-.06em}.site-nav{display:flex;gap:25px;margin-left:auto;margin-right:24px}.site-nav a{color:var(--muted);font-size:12px;text-decoration:none;transition:color .2s}.site-nav a:hover{color:var(--accent-dark)}.icon-button{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:50%;width:43px;height:43px;font-size:18px;transition:.2s;box-shadow:0 7px 20px rgba(43,132,140,.09)}.icon-button:hover{border-color:var(--accent);color:var(--accent);transform:rotate(18deg) scale(1.08)}main{flex:1}.hero{width:min(920px,100%);min-height:48vh;display:flex;flex-direction:column;justify-content:center;max-width:920px;margin:0 auto 26px;text-align:center}.eyebrow,.panel-kicker,.section-label{color:var(--accent-dark);text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:700}.eyebrow{display:inline-flex;align-self:center;align-items:center;padding:8px 14px;border:1px solid #c9f0e7;border-radius:20px;background:rgba(236,255,251,.7);animation:fadeUp .75s both}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#0abb91;box-shadow:0 0 0 4px #d7f7ed;margin-right:7px;animation:statusPulse 2s infinite}h1{font-size:clamp(46px,7.5vw,94px);line-height:.94;letter-spacing:-.085em;margin:24px 0;font-weight:700;animation:fadeUp .8s .1s both}h1 em{color:var(--accent-dark);font-style:normal}.hero p{color:var(--muted);font-size:clamp(14px,1.4vw,17px);line-height:1.65;margin:auto;max-width:680px;animation:fadeUp .8s .2s both}code,kbd{font-family:"DM Mono",monospace}code{color:var(--accent-dark);background:var(--soft);border-radius:5px;padding:3px 6px;font-size:.88em}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);align-items:center;gap:clamp(18px,2.5vw,38px);width:100%}.panel{background:var(--surface);border:1px solid rgba(205,231,232,.95);border-radius:17px;padding:clamp(22px,2.5vw,34px);box-shadow:var(--shadow);min-width:0;backdrop-filter:blur(8px);animation:fadeUp .8s .28s both;transition:transform .35s,box-shadow .35s}.panel:hover{transform:translateY(-7px);box-shadow:0 30px 62px rgba(56,132,147,.18)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}h2{font-size:17px;letter-spacing:-.035em;margin:7px 0 0}.format-badge{color:var(--accent-dark);background:var(--soft);border-radius:16px;padding:7px 11px;font:500 10px "DM Mono",monospace}textarea{width:100%;min-height:215px;resize:vertical;border:1px solid #d6e8eb;border-radius:11px;outline:none;color:#48637d;background:rgba(248,252,253,.8);padding:18px 20px;font:13px/1.75 "DM Mono",monospace;transition:.2s}textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,174,145,.1)}.sample-row,.output-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;color:var(--muted);font:11px "DM Mono",monospace}.text-button{border:0;padding:0;color:var(--accent-dark);background:none;font-size:12px;font-weight:600}.text-button:hover{text-decoration:underline}.action-column{text-align:center;animation:fadeUp .8s .42s both}.convert-button{width:100%;color:white;background:linear-gradient(135deg,#0cc8a6,#009b87);border:0;border-radius:17px;padding:16px 10px;font-weight:700;box-shadow:0 9px 0 #c6f6ed,0 13px 22px rgba(0,162,140,.24);transition:.2s;animation:buttonGlow 3s ease-in-out infinite}.convert-button:hover{transform:translateY(-4px);box-shadow:0 12px 0 #c6f6ed,0 17px 28px rgba(0,162,140,.28)}.arrow{font-size:18px;margin-left:8px}.keyboard-hint{display:block;color:var(--muted);font-size:10px;margin-top:18px;line-height:1.8}kbd{border:1px solid #d4e5e7;border-bottom-width:2px;background:#fff;border-radius:4px;padding:2px 5px;font-size:9px}.output-box{min-height:215px;max-height:370px;overflow:auto;border:1px solid #d6e8eb;border-radius:11px;background:rgba(248,252,253,.8);padding:16px}.empty-state{height:180px;display:grid;place-content:center;text-align:center;color:#728ba2;font-size:13px;line-height:1.55}.empty-icon{color:var(--accent);font-size:25px;display:block;margin-bottom:10px;animation:spinFloat 4s ease-in-out infinite}.json-output{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);font:13px/1.75 "DM Mono",monospace}.json-key{color:#a0528d}.json-string{color:#ad682f}.json-number{color:#2779ac}.json-boolean{color:#8b58a8}.json-null{color:#78888a;font-style:italic}.copy-button{border:1px solid #c8ece5;color:var(--accent-dark);background:#fff;border-radius:17px;padding:8px 11px;font-size:11px;font-weight:600;transition:.2s}.copy-button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.copy-button:disabled{opacity:.4;cursor:not-allowed}.error-box{color:var(--danger);background:#fff1f0;border:1px solid #f1c9c6;border-radius:9px;margin:18px 0 0;padding:13px 16px;font-size:12px}.privacy-note{color:var(--muted);text-align:center;font-size:11px;margin:32px 0 48px}.privacy-note span{color:var(--accent);margin-right:5px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:54px}.info-card{background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:14px;padding:23px;scroll-margin-top:25px;animation:fadeUp .8s .55s both;transition:transform .3s}.info-card:hover{transform:translateY(-5px)}.info-card h2{font-size:18px}.info-card p{color:var(--muted);font-size:12px;line-height:1.7;margin:13px 0 0}.info-card a{display:block;color:var(--accent-dark);font-size:12px;text-decoration:none;margin-top:8px}.info-card a:hover{text-decoration:underline}.official-links{border-top:1px solid var(--line);margin-top:14px;padding-top:9px;display:flex;gap:16px}.official-links a{display:inline-block;font-size:11px}footer{border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:10px;letter-spacing:.03em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.dark{--bg:#0d2224;--surface:rgba(20,49,50,.92);--ink:#e7f4f1;--muted:#9bb8b8;--line:#2b5554;--accent:#55d7bb;--accent-dark:#7de4ce;--soft:#1b4845;--shadow:0 22px 48px rgba(0,0,0,.25)}body.dark textarea,body.dark .output-box{background:rgba(10,31,34,.8);color:var(--ink)}body.dark .copy-button,body.dark kbd{background:#173738;color:var(--ink);border-color:#35625e}body.dark .info-card{background:rgba(22,54,54,.7)}body.dark .error-box{background:#432522;border-color:#71423d}@media(max-width:900px){.workspace{grid-template-columns:1fr;gap:15px}.action-column{order:3}.convert-button{width:auto;min-width:170px}.keyboard-hint{display:inline-block;margin-left:11px}.info-grid{grid-template-columns:1fr 1fr}.hero{min-height:42vh}}@media(max-width:600px){.page-shell{padding:20px 16px}.site-nav{gap:12px;margin-right:11px}.site-nav a{font-size:10px}.hero{min-height:55vh;margin:0 auto 25px}.hero p{font-size:13px}.panel{padding:17px}.info-grid{grid-template-columns:1fr}.official-links{flex-wrap:wrap}footer span:last-child{display:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}@keyframes pulse{0%,100%{transform:scale(.8);opacity:.25}50%{transform:scale(1.15);opacity:.6}}@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(2deg)}}@keyframes statusPulse{0%,100%{box-shadow:0 0 0 4px #d7f7ed}50%{box-shadow:0 0 0 8px rgba(215,247,237,0)}}@keyframes buttonGlow{0%,100%{filter:saturate(1)}50%{filter:saturate(1.2) brightness(1.04)}}@keyframes spinFloat{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(12deg) translateY(-4px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}