.tool{width:min(100%, var(--content-width));padding:var(--space-lg) 0;margin-inline:auto}.tool-header{margin-bottom:var(--space-lg)}.tool-header h1{margin:0 0 .5rem}.tool-header p{color:#555;margin:0}.text-compare{--accent:#4f46e5;--accent-dark:#3f38c2;width:100%}.text-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.text-panel{flex-direction:column;display:flex}.text-panel-head{justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem;display:flex}.text-panel label{font-weight:600}.text-stats{color:#777;white-space:nowrap;font-size:.8rem}.text-panel textarea{width:100%;min-height:280px;font:inherit;border-radius:var(--radius);resize:vertical;border:1px solid #ccc;padding:1rem;line-height:1.6}.text-panel textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.diff-options{border-radius:var(--radius);background:#fafafa;border:1px solid #eee;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.25rem;padding:.85rem 1rem;display:flex}.option-group{align-items:center;gap:.5rem;display:flex}.option-group label{color:#444;font-size:.9rem;font-weight:600}.diff-options select{font:inherit;background:#fff;border:1px solid #ccc;border-radius:8px;padding:.4rem .6rem;font-size:.9rem}.checkbox-option{color:#444;cursor:pointer;align-items:center;gap:.4rem;font-size:.9rem;display:flex}.checkbox-option input{accent-color:var(--accent);width:1rem;height:1rem}.compare-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;display:flex}.compare-actions button{font:inherit;border-radius:var(--radius);cursor:pointer;border:1px solid #ccc;padding:.7rem 1.2rem;transition:background .15s,border-color .15s}.primary-button{background:var(--accent);color:#fff;font-weight:600;border-color:var(--accent)!important}.primary-button:hover{background:var(--accent-dark);border-color:var(--accent-dark)!important}.secondary-button:hover{background:#f0f0f0;border-color:#999}.small-button{font:inherit;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:8px;padding:.45rem .8rem;font-size:.85rem;transition:background .15s,border-color .15s}.small-button:hover{background:#f0f0f0;border-color:#999}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.compare-status{color:#444;min-height:1.5rem;margin-top:1rem;font-size:.9rem}.comparison-result{margin-top:1.5rem}.result-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.result-head h2{margin:0;font-size:1.1rem}.diff-legend{color:#555;flex-wrap:wrap;gap:1rem;margin-bottom:.75rem;font-size:.85rem;display:flex}.legend-item{align-items:center;gap:.4rem;display:inline-flex}.legend-swatch{border-radius:3px;width:.9rem;height:.9rem;display:inline-block}.diff-summary{color:#333;margin:0 0 .75rem;font-size:.9rem;font-weight:600}#result{border-radius:var(--radius);white-space:pre-wrap;word-wrap:break-word;border:1px solid #ddd;padding:1rem;line-height:1.7;overflow-x:auto}.diff-added{background:#dff5df}.diff-removed{background:#f8dada;text-decoration:line-through}.diff-lines{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}.diff-line{border-radius:4px;gap:.6rem;padding:.05rem .4rem;display:flex}.diff-marker{color:#777;-webkit-user-select:none;user-select:none;flex:none;width:1rem}.diff-line-text{word-break:break-word;flex:1}.diff-line-added{background:#dff5df}.diff-line-added .diff-marker{color:#2e7d32}.diff-line-removed{background:#f8dada}.diff-line-removed .diff-marker{color:#c62828}.about-section{width:min(100%, var(--content-width));padding:0 0 var(--space-xl);margin-inline:auto;margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid #eee}.about-section h2{margin:0 0 1rem;font-size:1.35rem}.about-section h3{margin:1.5rem 0 .5rem;font-size:1.05rem}.about-section h4{margin:1.25rem 0 .35rem;font-size:.95rem}.about-section p{color:#444;margin:0 0 .5rem}@media (width<=700px){.text-inputs{grid-template-columns:1fr}.text-panel textarea{min-height:220px}.diff-options{flex-direction:column;align-items:flex-start;gap:.75rem}.compare-actions{flex-direction:column}.compare-actions button{width:100%}.result-head{flex-direction:column;align-items:flex-start;gap:.5rem}}