:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--bg-card-hover:#334155;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#38bdf8;--accent-green:#4ade80;--accent-purple:#a78bfa;--border:#334155;--radius:.75rem}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}body{background-color:var(--bg-primary);color:var(--text-primary);flex-direction:column;min-height:100vh;display:flex}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-green)}main{flex:1}.nav{border-bottom:1px solid var(--border);background:var(--bg-primary);z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1rem;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.nav-logo{color:var(--text-primary);font-size:1.25rem;font-weight:700}.nav-logo span{color:var(--accent);font-weight:300}.nav-links{display:none}.footer{border-top:1px solid var(--border);text-align:center;padding:2rem 1rem}.footer-container{max-width:1200px;margin:0 auto}.footer p{color:var(--text-muted);font-size:.875rem}.hero{text-align:center;max-width:800px;margin:0 auto;padding:4rem 1rem}.hero h1{letter-spacing:-.025em;font-size:2.5rem;font-weight:700;line-height:1.2}.hero h1 .highlight{background:linear-gradient(135deg,var(--accent),var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero p{color:var(--text-secondary);max-width:600px;margin-top:1.5rem;margin-left:auto;margin-right:auto;font-size:1.125rem}.tools-section{max-width:1200px;margin:0 auto;padding:2rem 1rem 4rem}.tools-section h2{text-align:center;margin-bottom:2rem;font-size:1.5rem;font-weight:600}.tools-grid{grid-template-columns:1fr;gap:1.5rem;display:grid}.tool-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s;display:block}.tool-card:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--text-primary);transform:translateY(-2px)}.tool-card h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.tool-card p{color:var(--text-secondary);font-size:.875rem;line-height:1.5}.tool-card .tool-tag{color:var(--accent);background:#38bdf81a;border:1px solid #38bdf833;border-radius:9999px;margin-top:1rem;padding:.25rem .75rem;font-size:.75rem;display:inline-block}.page-container{max-width:800px;margin:0 auto;padding:2rem 1rem 4rem}.page-container h1{margin-bottom:.5rem;font-size:2rem;font-weight:700}.page-container .page-desc{color:var(--text-secondary);margin-bottom:2rem}.textarea-wrapper{position:relative}.textarea-wrapper textarea{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);width:100%;min-height:200px;color:var(--text-primary);resize:vertical;outline:none;padding:1rem;font-family:inherit;font-size:1rem;line-height:1.6;transition:border-color .2s}.textarea-wrapper textarea:focus{border-color:var(--accent)}.textarea-wrapper textarea::placeholder{color:var(--text-muted)}.char-count{text-align:right;color:var(--text-muted);margin-top:.5rem;font-size:.75rem}.buttons-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.5rem;display:grid}.case-btn{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);cursor:pointer;text-align:center;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}.case-btn:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--accent)}.case-btn:active{transform:scale(.97)}.output-section{margin-top:2rem}.output-section h2{margin-bottom:.75rem;font-size:1rem;font-weight:600}.output-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);min-height:100px;color:var(--text-primary);white-space:pre-wrap;word-break:break-word;padding:1rem;font-size:1rem;line-height:1.6}.copy-btn{background:var(--accent);border-radius:var(--radius);color:var(--bg-primary);cursor:pointer;border:none;margin-top:.75rem;padding:.5rem 1.5rem;font-size:.875rem;font-weight:600;transition:opacity .2s}.copy-btn:hover{opacity:.85}.seo-section{border-top:1px solid var(--border);max-width:800px;margin:0 auto;padding:3rem 1rem}.seo-section h2{margin-bottom:1rem;font-size:1.25rem;font-weight:600}.seo-section p{color:var(--text-secondary);margin-bottom:1rem;font-size:.875rem;line-height:1.7}@media screen and (min-width:640px){.hero h1{font-size:3.5rem}.tools-grid{grid-template-columns:repeat(2,1fr)}.buttons-grid{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1024px){.tools-grid{grid-template-columns:repeat(3,1fr)}.buttons-grid{grid-template-columns:repeat(5,1fr)}}.tool-card.coming-soon:hover{opacity:.85}.coming-soon-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;background:#ff6b35;border-radius:4px;padding:3px 8px;font-size:.7rem;font-weight:600;position:absolute;top:12px;right:12px}.footer-links{gap:20px;margin-top:8px;display:flex}.footer-links a{color:#888;font-size:.85rem;text-decoration:none}.footer-links a:hover{color:#fff;text-decoration:underline}.breadcrumbs{color:var(--text-muted);margin-bottom:1.5rem;font-size:.875rem}.breadcrumbs a{color:var(--text-secondary)}.breadcrumbs a:hover{color:var(--accent)}.breadcrumb-sep{color:var(--text-muted);margin:0 .5rem}.breadcrumbs [aria-current=page]{color:var(--text-primary)}.faq-section{border-top:1px solid var(--border);margin-top:2rem;padding:2rem 0}.faq-section h2{margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}.faq-list{flex-direction:column;gap:.75rem;display:flex}.faq-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.faq-item summary{cursor:pointer;color:var(--text-primary);justify-content:space-between;align-items:center;padding:1rem 1.25rem;font-weight:500;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--accent);font-size:1.25rem;transition:transform .2s}.faq-item[open] summary:after{content:"−"}.faq-item p{color:var(--text-secondary);padding:0 1.25rem 1rem;font-size:.875rem;line-height:1.7}.faq-item summary:hover{background:var(--bg-card-hover)}.tool-card.coming-soon{opacity:.6;cursor:default;position:relative}.tool-card.coming-soon:hover{border-color:var(--border);background:var(--bg-card);transform:none}.coming-soon-badge{text-transform:uppercase;letter-spacing:.05em;color:var(--accent-purple);background:#a78bfa26;border:1px solid #a78bfa4d;border-radius:4px;padding:.2rem .5rem;font-size:.625rem;position:absolute;top:1rem;right:1rem}.output-status{background:var(--bg-secondary);border:1px solid var(--accent);border-radius:var(--radius);color:var(--text-secondary);justify-content:space-between;align-items:center;margin-top:1rem;padding:.75rem 1rem;font-size:.875rem;display:flex}.output-status strong{color:var(--accent)}.stats-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1.5rem;display:grid}.stat-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex-direction:column;gap:.25rem;padding:1rem;display:flex}.stat-value{color:var(--accent);font-size:1.5rem;font-weight:700}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:.75rem}@media screen and (min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}.json-actions{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.json-actions .case-btn{padding:.5rem 1rem;font-size:.8rem}.json-panels{grid-template-columns:1fr;gap:1rem;display:grid}.json-panel{flex-direction:column;display:flex}.panel-header{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.8rem;font-weight:600;display:flex}.json-textarea{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);width:100%;min-height:250px;color:var(--text-primary);resize:vertical;outline:none;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.6;transition:border-color .2s}.json-textarea:focus{border-color:var(--accent)}.json-textarea::placeholder{color:var(--text-muted)}.json-error{border-radius:var(--radius);color:#f87171;white-space:pre-wrap;word-break:break-word;background:#ef44441a;border:1px solid #ef44444d;min-height:250px;padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.6}.json-error strong{color:#ef4444}.indent-toggle{gap:.25rem;display:flex}.indent-btn{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:4px;padding:.25rem .5rem;font-size:.7rem;transition:all .2s}.indent-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}@media screen and (min-width:768px){.json-panels{grid-template-columns:1fr 1fr}}.lorem-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.lorem-label{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.lorem-input{background:var(--bg-secondary);border:1px solid var(--border);width:70px;color:var(--text-primary);border-radius:6px;outline:none;padding:.5rem;font-size:.875rem}.lorem-input:focus{border-color:var(--accent)}.case-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.color-inputs{flex-direction:column;gap:1rem;display:flex}.color-row{align-items:center;gap:.75rem;display:flex}.color-row label{color:var(--text-secondary);flex:1;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.color-row label span{text-transform:uppercase;letter-spacing:.03em;min-width:50px;font-size:.75rem;font-weight:600}.color-picker-input{cursor:pointer;background:0 0;border:none;border-radius:6px;width:50px;height:40px}.hash-results{flex-direction:column;gap:.75rem;margin-top:1.5rem;display:flex}.hash-row{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.hash-label{color:var(--accent);text-transform:uppercase;min-width:60px;font-size:.75rem;font-weight:600}.hash-value{color:var(--text-primary);word-break:break-all;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem}.regex-pattern-row{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.5rem;padding:.75rem 1rem;display:flex}.regex-slash{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1.25rem}.regex-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1rem}.regex-input::placeholder{color:var(--text-muted)}.regex-flags{gap:.25rem;display:flex}.flag-btn{background:var(--bg-primary);border:1px solid var(--border);width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.flag-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.regex-highlight{white-space:pre-wrap;word-break:break-word;line-height:1.8}.regex-highlight mark{color:var(--accent);background:#38bdf840;border-radius:2px;padding:.1rem .2rem}.markdown-preview{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);min-height:400px;color:var(--text-primary);padding:1.5rem;font-size:.9rem;line-height:1.7;overflow-y:auto}.markdown-preview h1{margin:1rem 0 .5rem;font-size:1.75rem;font-weight:700}.markdown-preview h2{margin:1rem 0 .5rem;font-size:1.4rem;font-weight:600}.markdown-preview h3{margin:.75rem 0 .5rem;font-size:1.15rem;font-weight:600}.markdown-preview p{margin:.5rem 0}.markdown-preview strong{color:var(--text-primary)}.markdown-preview em{font-style:italic}.markdown-preview del{color:var(--text-muted);text-decoration:line-through}.markdown-preview a{color:var(--accent);text-decoration:underline}.markdown-preview code{background:var(--bg-primary);border-radius:4px;padding:.15rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85em}.markdown-preview pre{background:var(--bg-primary);border-radius:var(--radius);margin:.75rem 0;padding:1rem;overflow-x:auto}.markdown-preview pre code{background:0 0;padding:0}.markdown-preview blockquote{border-left:3px solid var(--accent);color:var(--text-secondary);margin:.75rem 0;padding-left:1rem}.markdown-preview ul{margin:.5rem 0;padding-left:1.5rem}.markdown-preview li{margin:.25rem 0}.markdown-preview hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}.preview-section{margin-top:2rem}.device-toggle{gap:.25rem;display:flex}.preview-frame-wrapper{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;margin-top:.75rem;padding:1.5rem;display:flex;overflow-x:auto}.preview-frame-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.7rem}.preview-frame{border:1px solid var(--border);background:#fff;border-radius:8px;max-width:100%;height:500px;transition:width .3s}.changes-list{border-radius:var(--radius);background:#4ade800d;border:1px solid #4ade8033;margin-top:1.5rem;padding:1rem 1.25rem}.changes-list ul{margin-top:.75rem;padding:0;list-style:none}.changes-list li{color:var(--accent-green);padding:.3rem 0;font-size:.85rem}.nav-links-desktop{align-items:center;gap:1.5rem;font-size:.875rem;display:none}.nav-links-desktop a{color:var(--text-secondary);transition:color .2s}.nav-links-desktop a:hover{color:var(--text-primary)}.nav-all-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:.35rem .75rem;font-size:.8rem;transition:all .2s}.nav-all-btn:hover{border-color:var(--accent);color:var(--accent)}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:flex}.hamburger-line{background:var(--text-secondary);border-radius:2px;width:22px;height:2px;transition:all .3s;display:block}.hamburger-line.open:first-child{transform:rotate(45deg)translate(5px,5px)}.hamburger-line.open:nth-child(2){opacity:0}.hamburger-line.open:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}.nav-dropdown{border-top:1px solid var(--border);grid-template-columns:1fr;gap:0;max-width:1200px;margin:0 auto;padding:.5rem 1rem 1rem;display:grid}.nav-dropdown a{color:var(--text-secondary);border-radius:6px;padding:.6rem .75rem;font-size:.875rem;transition:all .15s}.nav-dropdown a:hover{background:var(--bg-secondary);color:var(--text-primary)}@media screen and (min-width:768px){.hamburger{display:none}.nav-links-desktop{display:flex}.nav-dropdown{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1024px){.nav-dropdown{grid-template-columns:repeat(4,1fr)}}