:root{--bg-color: #f9f8f4;--text-color: #333;--header-bg: #333;--header-text: #fff;--accent-color: #5d5068;--accent-light: #f0eff4;--border-color: #ddd}body{margin:0;padding:0;background-color:var(--bg-color);background-image:radial-gradient(#d0d0d0 1px,transparent 1px);background-size:20px 20px;color:var(--text-color);font-family:Yu Gothic,YuGothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;line-height:1.6}header{background-color:var(--header-bg);color:var(--header-text);padding:1.5rem 1rem 2rem;text-align:center;position:relative;margin-bottom:2rem;box-shadow:0 4px 6px #0000001a}header:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:10px;background-image:linear-gradient(to right,#ccc 50%,transparent 50%);background-size:20px 100%;opacity:.3}h1{margin:0;font-size:1.8rem;font-weight:700;letter-spacing:.1em}p.subtitle{margin-top:.5rem;font-size:.9rem;opacity:.8}main{max-width:95%;margin:0 auto;padding:0 1rem}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.panel{position:relative;background:#fff;padding:1rem;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 10px #00000005}.panel:before,.panel:after{content:"";position:absolute;width:15px;height:15px;border-color:var(--accent-color);border-style:solid;pointer-events:none}.panel:before{top:-1px;left:-1px;border-width:2px 0 0 2px}.panel:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}.panel-header{margin-bottom:.5rem}.panel-title-row{display:flex;align-items:center;font-size:.9rem;font-weight:700;color:var(--text-color);margin-bottom:.25rem}.panel-icon{display:inline-block;width:8px;height:8px;background-color:var(--accent-color);transform:rotate(45deg);margin-right:8px}.char-count{display:block;font-size:.75rem;color:#777;margin-left:16px}textarea{width:100%;height:300px;padding:.75rem;border:1px solid #ddd;border-radius:4px;resize:vertical;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.85rem;background-color:#fff;box-shadow:inset 0 1px 3px #0000000d;line-height:1.4}textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #5d50681a}.actions{text-align:center;margin:1.5rem 0;display:flex;justify-content:center;gap:1rem}.btn{padding:.6rem 1.5rem;border-radius:4px;font-weight:700;cursor:pointer;transition:all .2s;font-size:.9rem}.btn-compare{background-color:var(--accent-color);color:#fff;border:none;box-shadow:0 2px 4px #0003}.btn-compare:hover{background-color:#4a4055;transform:translateY(-1px)}.btn-clear{background-color:#fff;color:#555;border:1px solid #ccc}.btn-clear:hover{background-color:#f5f5f5}.btn-swap{background-color:#fff;color:#555;border:1px solid #ccc}.btn-swap:hover{background-color:#f0f0f0}.btn-sm{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:0 .5rem;opacity:.6;transition:opacity .2s}.btn-sm:hover{opacity:1}.result-area{margin-bottom:4rem;overflow:hidden;background:#fff;border:1px solid #eee}.diff-container{overflow-x:auto}.diff-table{width:100%;border-collapse:collapse;table-layout:fixed}.diff-table col.col-num{width:40px}.diff-table col.col-content{width:calc(50% - 40px)}.diff-table th{text-align:left;padding:.5rem;border-bottom:2px solid var(--accent-color);color:var(--accent-color);font-size:.85rem;background-color:#5d50680d}.diff-table td{padding:0 .5rem;border-bottom:1px solid #f0f0f0;vertical-align:top;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;white-space:pre-wrap;word-break:break-all;font-size:.85rem;line-height:1.5;height:1.5em}.diff-num{text-align:right;color:#999;-webkit-user-select:none;user-select:none;border-right:1px solid #eee;background-color:#fafafa;font-size:.75rem;padding-right:.5rem!important}.type-modified{background-color:#fffbeb}.diff-num.type-modified{background-color:#fef3c7;border-right-color:#fde68a}.type-added{background-color:#ecfdf5}.diff-num.type-added{background-color:#d1fae5;border-right-color:#a7f3d0}.type-removed{background-color:#fef2f2}.diff-num.type-removed{background-color:#fee2e2;border-right-color:#fecaca}.type-modified span.highlight-removed{background-color:#fca5a5;text-decoration:line-through;color:#7f1d1d;border-radius:2px;padding:0 1px}.type-modified span.highlight-added{background-color:#86efac;color:#064e3b;border-radius:2px;padding:0 1px}@media(max-width:768px){.input-grid{grid-template-columns:1fr}}