*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:root{--bg:#ffffff;--fg:#333333;--primary:#007bff;--success:#28a745;--danger:#dc3545;--muted:#6c757d;--shadow:rgba(0,0,0,0.1)}@media (prefers-color-scheme:dark){:root{--bg:#1e1e1e;--fg:#e0e0e0;--shadow:rgba(0,0,0,0.5)}}body{font-family:"Segoe UI",sans-serif;background-color:var(--bg);color:var(--fg);line-height:1.6;display:flex;justify-content:center;padding:20px}.container{background-color:var(--bg);color:var(--fg);max-width:700px;width:100%;border-radius:12px;box-shadow:0 4px 12px var(--shadow);padding:24px;transition:background-color 0.3s ease,color 0.3s ease}h1{margin-bottom:16px;font-size:1rem;text-align:center}textarea{width:100%;min-height:200px;padding:12px;border:1px solid var(--muted);border-radius:8px;font-family:Consolas,monospace;font-size:0.95rem;background-color:var(--bg);color:var(--fg);transition:border-color 0.2s ease}textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,123,255,0.2)}.buttons{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}button{flex:1 1 calc(33.333% - 8px);padding:12px;border:none;border-radius:8px;background:#2b2b2b;color:#fff;font-size:1rem;cursor:pointer;transition:background-color 0.2s ease,transform 0.1s ease}button:hover{transform:translateY(-2px)}button:focus{outline:3px solid rgba(0,123,255,0.4)}button#convert{background-color:var(--success)}button#convert:hover{background-color:#218838}button#reset{background-color:var(--danger)}button#reset:hover{background-color:#c82333}button#copy{background-color:var(--primary)}button#copy:hover{background-color:#0056b3}pre{width:100%;max-height:300px;overflow-x:auto;padding:16px;background-color:#f4f4f4;border-radius:8px;font-family:Consolas,monospace;font-size:0.95rem;line-height:1.4;color:var(--fg);counter-reset:linenumber;position:relative;padding-left:3.5em;background-color:var(--bg);border:1px solid var(--muted);box-shadow:0 2px 8px var(--shadow);transition:background-color 0.3s ease,border-color 0.3s ease}pre code{display:block}pre code>*{counter-increment:linenumber}pre code>*::before{content:counter(linenumber);display:inline-block;width:2.5em;margin-left:-3.5em;text-align:right;color:var(--muted);user-select:none}@media (prefers-color-scheme:dark){pre{background-color:#2b2b2b;border-color:#444}}#jsonOutput{white-space:pre-wrap;background:#f7f7f7;padding:8px;border:1px solid #ddd}#statusMsg{text-align:center;margin-top:8px;font-size:0.9rem}@media (max-width:480px){.buttons{flex-direction:column}button{flex:1 1 100%}} header{align-items: center;  background-color:white;font-weight:500;transition:color 0.2s;padding:15px 20px}footer{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2rem;padding:2rem;background-color:#f8f8f8;color:#666666;font-size:0.875rem}

a{font-size: 25px;}