.hero{background:var(--bg-base);padding:var(--space-6) var(--space-5) var(--space-5);text-align:left;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(#00c89629 0%,#00c8960d 40%,#0000 70%);width:680px;max-width:90%;height:320px;position:absolute;top:-40%;left:8%}.hero>*{z-index:1;max-width:880px;position:relative}.hero-title{font-family:var(--font-mono);font-size:var(--text-3xl);color:var(--text-on-dark-primary);letter-spacing:-.8px;margin:0 0 var(--space-2);font-weight:500;line-height:1.15}.hero-title:before{content:"// ";color:var(--syntax-comment);font-weight:500}.hero-title:after{content:"";vertical-align:-.12em;background:var(--color-valid);opacity:.85;width:.5ch;height:1em;margin-left:.15ch;display:inline-block}@media (prefers-reduced-motion:no-preference){@keyframes hero-caret-blink{0%,45%{opacity:.85}55%,to{opacity:0}}.hero-title:after{animation:1.1s step-end infinite hero-caret-blink}}.hero-subtitle{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-on-dark-secondary);margin:0 0 var(--space-3);letter-spacing:.02em;line-height:1.7}.hero-pill{color:var(--color-valid);font-family:var(--font-body);font-size:var(--text-md);margin-bottom:var(--space-1);background:#00c8961a;border:1px solid #00c89640;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;line-height:1.4;display:inline-flex}.tab-bar-wrapper{background:var(--bg-base);border-bottom:1px solid var(--border-dark);scrollbar-width:none;display:flex;position:relative;overflow-x:auto}.tab-bar-wrapper::-webkit-scrollbar{display:none}.tab-bar-wrapper:after{content:"";pointer-events:none;background:linear-gradient(to right, transparent, var(--bg-base));flex:none;align-self:stretch;width:28px;margin-left:-28px;position:sticky;right:0}.tab-btn{padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-on-dark-secondary);cursor:pointer;white-space:nowrap;transition:color var(--t-fast), border-bottom-color var(--t-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex-shrink:0}.tab-btn[aria-selected=true]{border-bottom-color:var(--format-accent-on-dark,var(--color-valid));color:var(--text-on-dark-primary)}.tab-btn:hover:not([aria-selected=true]){color:var(--text-on-dark-primary)}.tab-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.tab-more{padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-on-dark-secondary);white-space:nowrap;cursor:default;align-self:center;margin-left:auto}.tool-split{background:var(--bg-editor);border-top:1px solid var(--border-dark);border-radius:0;grid-template-columns:55% 45%;display:grid}.editor-pane,.result-pane{min-width:0}.editor-body,.cm-editor{min-width:0;max-width:100%}.cm-scroller{overflow-x:auto}@media (width<=720px){.tool-split{grid-template-columns:1fr}.hero-title{font-size:24px;line-height:1.2}}.editor-pane{background:var(--bg-editor);flex-direction:column;min-height:280px;display:flex}.editor-chrome{background:var(--bg-editor-bar);padding:var(--space-2) var(--space-3);border-color:var(--border-dark);justify-content:space-between;align-items:center;display:flex}.editor-chrome--top{border-bottom:1px solid var(--border-dark)}.editor-chrome--bottom{border-top:1px solid var(--border-dark)}.editor-filename{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-on-dark-muted);align-items:center;gap:var(--space-2);display:inline-flex}.editor-filename:before{content:"";background:var(--format-accent-on-dark,var(--color-valid));border-radius:1px;width:3px;height:.9em}.editor-tools{gap:var(--space-2);display:flex}.btn-tool{color:var(--text-on-dark-muted);border:1px solid var(--border-dark-mid);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-xs);padding:2px var(--space-2);cursor:pointer;transition:color var(--t-fast), background var(--t-fast), border-color var(--t-fast);background:0 0}.btn-tool:hover{color:var(--text-on-dark-primary);border-color:var(--border-dark-mid);background:#ffffff0a}.btn-tool:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.editor-shortcut{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-on-dark-muted)}.editor-body{flex:1;overflow:hidden}.editor-textarea{background:var(--bg-editor);width:100%;height:100%;min-height:220px;color:var(--syntax-text);resize:none;padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);box-sizing:border-box;border:none;outline:none;line-height:1.9}.editor-actions{gap:var(--space-2);display:flex}.btn-validate{background:var(--color-valid);color:#0d1117;padding:var(--space-1) var(--space-4);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);cursor:pointer;transition:opacity var(--t-fast);border:none;font-weight:500}.btn-validate:hover{opacity:.85}.btn-validate:active{opacity:.7;transform:scale(.98)}.btn-validate:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.btn-validate:disabled{opacity:.45;cursor:not-allowed}.btn-validate:disabled:hover{opacity:.45}.btn-validate:disabled:active{transform:none}.btn-secondary{color:var(--text-on-dark-secondary);border:1px solid var(--border-dark-mid);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-xs);cursor:pointer;transition:color var(--t-fast), background var(--t-fast), border-color var(--t-fast);background:0 0}.btn-secondary:hover{color:var(--text-on-dark-primary);background:#ffffff0a}.btn-secondary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}@media (pointer:coarse){.btn-validate,.btn-secondary,.btn-tool,.tab-btn,.btn-copy-result{min-width:44px;min-height:44px;padding-inline:var(--space-4)}}.result-pane{background:var(--bg-result);flex-direction:column;min-height:280px;display:flex}.result-chrome{background:var(--bg-strip);border-bottom:1px solid var(--border-light);padding:var(--space-2) var(--space-3);justify-content:space-between;align-items:center;display:flex}.result-label,.result-format-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.result-format-label{font-family:var(--font-body)}.result-label{align-items:center;gap:6px;display:inline-flex}.result-label:before{content:"";background:var(--format-accent,var(--color-valid));border-radius:50%;flex-shrink:0;width:7px;height:7px}.result-body{padding:var(--space-6);flex:1;justify-content:center;align-items:center;display:flex}.share-note{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-caption);background:var(--bg-body);padding:var(--space-3) var(--space-5);text-align:center;margin:0}.page-content{max-width:70ch;padding:var(--space-10) var(--space-5);margin-inline:auto}.page-content h2{font-family:var(--font-body);font-size:var(--text-xl);color:var(--text-body);margin:0 0 var(--space-4);font-weight:500}.page-content h3{font-family:var(--font-body);font-size:var(--text-lg);color:var(--text-body);margin:var(--space-6) 0 var(--space-2);font-weight:500}.page-content p{font-family:var(--font-body);font-size:var(--text-lg);color:var(--text-body);margin:0 0 var(--space-4);line-height:1.7}.page-content a{color:var(--link-on-light);text-decoration:underline}.page-content a:hover{text-decoration:underline}.page-content a:focus-visible{outline:2px solid var(--focus-ring-on-light);outline-offset:2px;border-radius:var(--radius-sm)}.page-content table{border-collapse:collapse;max-width:100%;margin:0 0 var(--space-4);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;display:block;overflow-x:auto}.page-content caption{font-family:var(--font-body);font-size:var(--text-md);color:var(--text-muted);text-align:left;margin-bottom:var(--space-2)}.page-content th,.page-content td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-3);border:1px solid var(--border-light);color:var(--text-body)}.page-content thead th{background:var(--bg-strip);font-weight:500}.page-content table code{font-family:var(--font-mono);font-size:var(--text-md)}.faq{max-width:70ch;padding:0 var(--space-5) var(--space-12);margin-inline:auto}.faq h2{font-family:var(--font-body);font-size:var(--text-xl);color:var(--text-body);margin:0 0 var(--space-5);font-weight:500}.faq-item{border-top:1px solid var(--border-light);padding:var(--space-5) 0}.faq-item h3{font-family:var(--font-body);font-size:var(--text-lg);color:var(--text-body);margin:0 0 var(--space-2);font-weight:500}.faq-item p{font-family:var(--font-body);font-size:var(--text-lg);color:var(--text-body);margin:0;line-height:1.7}.faq-item a{color:var(--link-on-light);text-decoration:underline}.faq-item a:hover{text-decoration:underline}.faq-item a:focus-visible{outline:2px solid var(--focus-ring-on-light);outline-offset:2px;border-radius:var(--radius-sm)}