.interactive-wrapper{font-family:var(--body-font);background-color:#fff;border:1px solid #ddd;margin:2.5rem 0;box-shadow:0 2px 8px #0000000a}.interactive-header{background-color:#fafafa;border-bottom:1px solid #eee;padding:14px 20px}.interactive-title{color:var(--wrapper-color,var(--color2));text-transform:uppercase;letter-spacing:1px;align-items:center;gap:10px;font-size:12px;font-weight:700;line-height:1;display:flex;margin:0!important}.interactive-indicator{background-color:var(--wrapper-color,var(--color2));border-radius:50%;width:6px;height:6px}.interactive-description{color:#666;font-size:13px;font-weight:400;margin:6px 0 0!important}.interactive-content{padding:24px}.interactive-form{flex-direction:column;gap:20px;display:flex}.interactive-form code{background:0 0}.interactive-field{flex-direction:column;gap:8px;display:flex}.interactive-label{color:#333;text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.interactive-input{background-color:#fff;border:1px solid #ddd;border-radius:4px;padding:12px 14px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:15px;transition:border-color .15s,box-shadow .15s}.interactive-input:focus{border-color:var(--wrapper-color,var(--color2));outline:none;box-shadow:0 0 0 3px #455deb1a}.interactive-input::placeholder{color:#aaa}.interactive-regex-input{align-items:center;gap:8px;display:flex}.interactive-regex-slash{color:#999;font-family:SF Mono,Consolas,monospace;font-size:18px;font-weight:300}.interactive-input-pattern{flex:1}.interactive-input-flags{text-align:center;width:100px}.interactive-textarea{resize:none;width:100%;min-height:60px}.interactive-error{color:#c00;background-color:#fff5f5;border:1px solid #fcc;border-radius:4px;padding:12px 16px;font-size:14px}.interactive-result-box{background-color:#fafafa;border:1px solid #eee;border-radius:4px;padding:16px 20px}.interactive-result-title{color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:12px;font-weight:600}.interactive-result-content{color:#333;word-break:break-word;font-family:SF Mono,Consolas,monospace;font-size:16px;line-height:1.7}.interactive-match{background-color:var(--secondary-color);border-radius:2px;padding:2px 4px;font-weight:500}.interactive-code-block{background-color:#1e1e1e;border-radius:4px;padding:16px 20px;font-family:SF Mono,Consolas,monospace;font-size:14px}.interactive-code-title{color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:11px}.interactive-code-content{flex-direction:column;gap:6px;display:flex}.interactive-code-line{color:#e0e0e0}.interactive-code-index{color:#666;margin-right:8px}.interactive-code-match{color:var(--secondary-color)}.interactive-code-info{color:#666;margin-left:12px}.pattern-results{flex-direction:column;gap:6px;display:flex}.pattern-result-row{background:#fafafa;border:1px solid #eee;border-radius:4px;align-items:center;gap:14px;padding:12px 16px;transition:all .15s;display:flex}.pattern-result-row.pattern-match{background:#f0faf0;border-color:#c3e6c3}.pattern-result-row.pattern-no-match{opacity:.6}.pattern-result-indicator{width:20px;font-size:14px;font-weight:600}.pattern-match .pattern-result-indicator{color:#2a9d2a}.pattern-no-match .pattern-result-indicator{color:#999}.pattern-result-string{color:#333;flex:1;font-family:SF Mono,Consolas,monospace;font-size:14px}.pattern-result-label{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.pattern-match .pattern-result-label{color:#2a9d2a}.pattern-no-match .pattern-result-label{color:#999}.char-class-buttons{flex-wrap:wrap;gap:8px;display:flex}.char-class-btn{cursor:pointer;color:#333;background:#fff;border:1px solid #ddd;border-radius:4px;padding:10px 16px;font-family:SF Mono,Consolas,monospace;font-size:15px;transition:all .15s}.char-class-btn:hover{border-color:var(--color3)}.char-class-btn-active{border-color:var(--color3);background:var(--color3);color:#fff}.char-class-btn-active code{color:#fff}.char-class-info{border-left:3px solid var(--color3);background:#f8fffe;border-radius:0 4px 4px 0;padding:14px 18px}.char-class-meaning{color:#333;margin-bottom:6px;font-size:15px}.char-class-meaning strong{color:var(--color3);font-family:SF Mono,Consolas,monospace}.char-class-equivalent{color:#666;font-size:13px}.char-class-equivalent code{background:#0000000d;border-radius:3px;padding:2px 6px;font-size:12px}.quantifier-buttons,.boundary-buttons{flex-wrap:wrap;gap:8px;display:flex}.quantifier-btn{cursor:pointer;color:#333;background:#fff;border:1px solid #ddd;border-radius:4px;padding:10px 16px;font-size:13px;transition:all .15s}.quantifier-btn:hover{border-color:var(--wrapper-color,var(--color2))}.quantifier-btn-active{border-color:var(--wrapper-color,var(--color2));background:var(--wrapper-color,var(--color2));color:#fff}.quantifier-btn code{font-family:SF Mono,Consolas,monospace}.quantifier-btn-active code{color:#fff}.quantifier-info{border-left:3px solid var(--wrapper-color,var(--color2));background:#f8f9ff;border-radius:0 4px 4px 0;padding:14px 18px}.quantifier-pattern{margin-bottom:6px;font-size:14px}.quantifier-pattern code{color:var(--secondary-color);background:#1e1e1e;border-radius:3px;padding:4px 10px;font-size:14px}.quantifier-desc{color:#555;font-size:14px;line-height:1.5}.phone-results{border:1px solid #eee;border-radius:4px;overflow:hidden}.phone-results-header{text-transform:uppercase;letter-spacing:.5px;color:#666;background:#fafafa;border-bottom:1px solid #eee;justify-content:space-between;padding:12px 16px;font-size:11px;font-weight:600;display:flex}.phone-result-row{background:#fff;border-bottom:1px solid #f5f5f5;justify-content:space-between;align-items:center;padding:12px 16px;transition:background .15s;display:flex}.phone-result-row:last-child{border-bottom:none}.phone-result-row code{font-family:SF Mono,Consolas,monospace;font-size:14px}.phone-valid{background:#f8fff8}.phone-invalid{opacity:.5}.phone-result-badge{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.phone-valid .phone-result-badge{color:#2a9d2a}.phone-invalid .phone-result-badge{color:#999}.replace-row{align-items:flex-end;gap:16px;display:flex}.replace-arrow{color:#999;padding-bottom:12px;font-size:20px}.replace-comparison{grid-template-columns:1fr 1fr;gap:16px;display:grid}.replace-before,.replace-after{border-radius:4px;padding:16px 20px}.replace-before{background:#fafafa;border:1px solid #eee}.replace-after{background:#fffef5;border:1px solid #e8e4c0}.replace-label{text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:10px;font-size:11px;font-weight:600}.replace-text{word-break:break-word;color:#333;font-family:SF Mono,Consolas,monospace;font-size:16px}.replace-hint{color:#666;background:#fafafa;border-radius:4px;padding:14px 16px;font-size:13px;line-height:1.5}.replace-hint code{background:#fff;border:1px solid #eee;border-radius:3px;padding:2px 6px;font-family:SF Mono,Consolas,monospace;font-size:12px}@media (max-width:600px){.interactive-content{padding:16px}.interactive-form{gap:16px}.interactive-regex-input{flex-wrap:wrap}.interactive-input-pattern{flex:100%;order:1}.interactive-regex-slash:first-child{order:0}.interactive-regex-slash:nth-child(3){order:2}.interactive-input-flags{order:3;width:100px}.replace-comparison{grid-template-columns:1fr}.replace-row{flex-direction:column;align-items:stretch;gap:12px}.replace-arrow{text-align:center;padding:0}.char-class-btn,.quantifier-btn{padding:8px 12px;font-size:13px}.pattern-result-row{gap:10px;padding:10px 12px}.pattern-result-string{font-size:13px}}.copy-compare{flex-direction:column;gap:16px;display:flex}.copy-compare-cards{grid-template-columns:1fr 1fr;gap:16px;display:grid}.copy-compare-card{text-align:left;cursor:pointer;background:#fff;border:2px solid #e5e5e5;border-radius:8px;padding:16px;transition:border-color .15s,box-shadow .15s}.copy-compare-card:hover{border-color:#ccc}.copy-compare-card.active{border-color:var(--color2);box-shadow:0 0 0 3px #455deb1a}.copy-compare-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;align-items:center;gap:4px;margin-bottom:10px;padding:4px 8px;font-size:11px;font-weight:600;display:inline-flex}.copy-compare-badge.bad{color:#dc2626;background:#fee2e2}.copy-compare-badge.good{color:#16a34a;background:#dcfce7}.copy-compare-text{color:#333;font-size:15px;line-height:1.5}.copy-compare-context{color:#666;text-align:center;margin:0;font-size:13px}.error-demo{flex-direction:column;gap:20px;display:flex}.error-demo-toggle{justify-content:center;gap:8px;display:flex}.error-demo-toggle-btn{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s}.error-demo-toggle-btn.active{color:#fff;background:#333;border-color:#333}.error-demo-preview{justify-content:center;padding:20px 0;display:flex}.error-demo-card{text-align:center;background:#fff;border:1px solid #e5e5e5;border-radius:12px;max-width:320px;padding:24px;box-shadow:0 4px 12px #00000014}.error-demo-icon{color:#999;margin-bottom:12px}.error-demo-title{color:#333;margin:0 0 8px;font-size:16px;font-weight:600}.error-demo-message{color:#666;margin:0 0 16px;font-size:14px;line-height:1.5}.error-demo-button{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:6px;padding:10px 24px;font-size:14px;font-weight:500;transition:background .15s;display:inline-flex}.error-demo-button.muted{color:#666;background:#e5e5e5}.error-demo-button.action{background:var(--color2);color:#fff}.error-demo-button.action:hover{opacity:.9}.error-demo-button:disabled{opacity:.7;cursor:not-allowed}.error-demo-button .spinning{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-demo-caption{color:#666;text-align:center;margin:0;font-size:13px}.tone-slider{flex-direction:column;gap:20px;display:flex}.tone-slider-preview{justify-content:center;min-height:120px;display:flex}.tone-slider-card{text-align:center;background:#f8f9fa;border:1px solid #e5e5e5;border-radius:12px;max-width:400px;padding:20px 24px}.tone-slider-emoji{margin-bottom:12px;font-size:32px;display:block}.tone-slider-message{color:#333;margin:0;font-size:15px;line-height:1.6}.tone-slider-control{flex-direction:column;gap:12px;display:flex}.tone-slider-range{appearance:none;cursor:pointer;background:#e5e5e5;border-radius:3px;width:100%;height:6px}.tone-slider-range::-webkit-slider-thumb{appearance:none;background:var(--color2);cursor:grab;border-radius:50%;width:20px;height:20px}.tone-slider-labels{justify-content:space-between;display:flex}.tone-slider-label{color:#888;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:12px;transition:all .15s}.tone-slider-label.active{color:var(--color2);font-weight:600}.tone-slider-label:hover{background:#f5f5f5}.tone-slider-hint{color:#999;text-align:center;margin:0;font-size:12px}.button-label-demo{flex-direction:column;gap:16px;display:flex}.button-label-columns{grid-template-columns:1fr 1fr;gap:20px;display:grid}.button-label-column{background:#fff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden}.button-label-header{text-transform:uppercase;letter-spacing:.5px;padding:10px 16px;font-size:12px;font-weight:600}.button-label-header.bad{color:#dc2626;background:#fee2e2}.button-label-header.good{color:#16a34a;background:#dcfce7}.button-label-list{flex-direction:column;gap:8px;min-height:160px;padding:12px;display:flex}.button-label-item{background:#f8f9fa;border-radius:6px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:14px;display:flex}.button-label-confirm{color:#666;align-items:center;gap:8px;font-size:12px;display:flex}.button-label-btn{cursor:pointer;border:none;border-radius:4px;align-items:center;gap:4px;padding:6px 10px;font-size:12px;font-weight:500;transition:opacity .15s;display:inline-flex}.button-label-btn.vague{color:#666;background:#e5e5e5}.button-label-btn.clear-action{color:#fff;background:#dc2626}.button-label-btn.cancel{color:#666;background:#fff;border:1px solid #ddd}.button-label-btn:hover{opacity:.85}.button-label-empty{color:#999;text-align:center;margin:0;padding:20px;font-size:13px}.button-label-reset{cursor:pointer;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;align-self:center;padding:8px 16px;font-size:13px;transition:background .15s}.button-label-reset:hover{background:#eee}.button-label-caption{color:#666;text-align:center;margin:0;font-size:13px}.consistency-checker{flex-direction:column;gap:20px;display:flex}.consistency-toggle{justify-content:center;gap:8px;display:flex}.consistency-toggle-btn{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.consistency-toggle-btn.active{color:#fff;background:#333;border-color:#333}.consistency-preview{justify-content:center;display:flex}.consistency-menu{background:#fff;border:1px solid #e5e5e5;border-radius:12px;min-width:220px;overflow:hidden;box-shadow:0 4px 12px #00000014}.consistency-menu-header{color:#999;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #eee;padding:12px 16px;font-size:12px;font-weight:600}.consistency-menu-item{cursor:pointer;border-bottom:1px solid #f5f5f5;align-items:center;gap:12px;padding:12px 16px;transition:background .15s;display:flex}.consistency-menu-item:last-child{border-bottom:none}.consistency-menu-item:hover{background:#f8f9fa}.consistency-menu-icon{font-size:18px}.consistency-menu-label{color:#333;font-size:14px}.consistency-menu-label .highlight-bad{color:#dc2626;background:#fee2e2;border-radius:3px;padding:1px 4px}.consistency-caption{color:#666;text-align:center;margin:0;font-size:13px}.scan-test{flex-direction:column;gap:20px;display:flex}.scan-test-columns{grid-template-columns:1fr 1fr;gap:16px;display:grid}.scan-test-column{flex-direction:column;gap:8px;display:flex}.scan-test-label{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;align-self:flex-start;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.scan-test-label.bad{color:#dc2626;background:#fee2e2}.scan-test-label.good{color:#16a34a;background:#dcfce7}.scan-test-content{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:16px;font-size:14px;line-height:1.6}.scan-test-content.wall p{color:#555;margin:0}.scan-test-content.scannable h4{margin:0 0 12px;font-weight:600}.scan-test-content.scannable ol{margin:0 0 12px;padding-left:20px}.scan-test-content.scannable li{margin-bottom:6px}.scan-test-note{color:#888;margin:0;font-size:13px;font-style:italic}.scan-test-challenge{text-align:center;background:#f8f9fa;border:1px solid #eee;border-radius:8px;padding:16px}.scan-test-challenge p{margin:0 0 12px;font-size:14px}.scan-test-btn{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:500;transition:background .15s;display:inline-flex}.scan-test-btn.start{background:var(--color2);color:#fff}.scan-test-btn.stop{color:#fff;background:#16a34a}.scan-test-btn.reset{color:#666;background:#f5f5f5;border:1px solid #ddd}.scan-test-timer{justify-content:center;align-items:center;gap:16px;display:flex}.scan-test-time{font-variant-numeric:tabular-nums;color:var(--color2);font-size:28px;font-weight:600}.scan-test-result{flex-direction:column;align-items:center;gap:12px;display:flex}.accessibility-demo{flex-direction:column;gap:20px;display:flex}.accessibility-toggle{justify-content:center;gap:8px;display:flex}.accessibility-toggle-btn{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.accessibility-toggle-btn.active{color:#fff;background:#333;border-color:#333}.accessibility-preview{flex-direction:column;gap:16px;display:flex}.accessibility-context{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:20px}.accessibility-context p{margin:0 0 16px;font-size:14px;line-height:1.6}.accessibility-links{flex-wrap:wrap;gap:16px;display:flex}.accessibility-link{color:var(--color2);align-items:center;gap:4px;font-size:14px;text-decoration:underline;display:inline-flex}.accessibility-screenreader{color:#fff;background:#1a1a2e;border-radius:8px;padding:16px}.accessibility-sr-label{color:#aaa;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;display:flex}.accessibility-sr-output{flex-direction:column;gap:6px;display:flex}.accessibility-sr-item{color:#4ade80;font-family:monospace;font-size:13px}.accessibility-caption{color:#666;text-align:center;margin:0;font-size:13px}.word-counter{flex-direction:column;gap:20px;display:flex}.word-counter-tabs{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.word-counter-tab{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s}.word-counter-tab.active{color:#fff;background:#333;border-color:#333}.word-counter-comparison{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.word-counter-box{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:16px}.word-counter-box.before{border-left:3px solid #dc2626}.word-counter-box.after{border-left:3px solid #16a34a}.word-counter-header{text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px;font-weight:600;display:flex}.word-counter-box.before .word-counter-header{color:#dc2626}.word-counter-box.after .word-counter-header{color:#16a34a}.word-counter-count{color:#666;background:#f5f5f5;border-radius:10px;padding:2px 8px;font-size:11px}.word-counter-box p{color:#555;margin:0;font-size:14px;line-height:1.6}.word-counter-arrow{color:#16a34a;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600;display:flex}.word-counter-caption{color:#666;text-align:center;margin:0;font-size:13px}@media (max-width:640px){.copy-compare-cards,.button-label-columns,.scan-test-columns{grid-template-columns:1fr}.word-counter-comparison{grid-template-columns:1fr;gap:12px}.word-counter-arrow{flex-direction:row;justify-content:center;padding:8px 0}.tone-slider-labels{flex-wrap:wrap;justify-content:center;gap:4px}.accessibility-links{flex-direction:column;gap:10px}}.interactive-toggle-group{gap:10px;margin-bottom:20px;padding-bottom:4px;display:flex;overflow-x:auto}.interactive-btn{cursor:pointer;white-space:nowrap;background:0 0;border:2px solid #ddd;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .2s}.interactive-btn:hover{border-color:#bbb}.interactive-btn.active{background:var(--wrapper-color,#455deb);border-color:var(--wrapper-color,#455deb);color:#fff}.interactive-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}@media (max-width:600px){.interactive-grid{grid-template-columns:1fr}}.interactive-card{background:#fafafa;border:1px solid #eee;border-radius:8px;padding:16px}.interactive-stats{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:16px;font-size:14px;display:flex}.interactive-stat{align-items:center;gap:6px;display:flex}.interactive-stat strong{color:var(--wrapper-color,var(--color2))}.interactive-caption{color:#666;text-align:center;font-size:13px;font-style:italic;line-height:1.5;margin:16px 0 0!important}.interactive-toggle{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.interactive-toggle-btn{cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #ddd;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.interactive-toggle-btn:hover{border-color:#bbb}.interactive-toggle-btn.active{background:var(--wrapper-color,var(--color2));color:#fff;border-color:var(--wrapper-color,var(--color2))}.interactive-reset-btn{cursor:pointer;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;justify-content:center;align-items:center;gap:6px;margin:0 auto;padding:8px 16px;font-size:13px;font-weight:500;transition:background .15s;display:inline-flex}.interactive-reset-btn:hover{background:#eee}.interactive-column-label{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-bottom:8px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.interactive-column-label.bad{color:#dc2626;background:#fee2e2}.interactive-column-label.good{color:#16a34a;background:#dcfce7}