:root{--color-primary: #6901a2;--color-primary-hover: #7901bc;--color-primary-active: #480170;--color-accent: #e90464;--color-accent-hover: #f11653;--color-buggy: #dc3545;--color-buggy-hover: #c82333;--color-fixed: #28a745;--color-fixed-hover: #218838;--color-warning: #e90464;--color-text: #1e1e1e;--color-text-secondary: #666;--color-border: #e0e0e0;--color-background: #f8f9fa;--color-card-background: #ffffff;--color-code-background: #f0f0f0;--color-quaternary: #f8f8f8;--color-link: #0969da;--color-code: #cf222e;--color-success-light: #e7f5e7;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0}.header-image{width:100vw;max-width:none;margin-left:calc(-50vw + 50%);display:block}.demo-container{max-width:1200px;margin:0 auto;padding:0 1rem 2rem;line-height:1.6;color:var(--color-text)}.demo-header{margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--color-border)}.back-link{display:inline-block;margin-bottom:1rem;color:var(--color-primary);text-decoration:none;font-weight:500}.back-link:hover{text-decoration:underline}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-primary)}h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-primary)}h3{font-size:1.2rem;margin-bottom:.5rem;color:inherit}h4{font-size:1rem;margin-bottom:.5rem}.subtitle{font-size:1rem;color:var(--color-text-secondary);margin-bottom:.5rem}.github{font-size:.9rem}.github a{color:var(--color-link);text-decoration:none;margin-left:.5rem}.github a:hover{text-decoration:underline}code{background:var(--color-code-background);padding:.2rem .4rem;border-radius:3px;font-family:Courier New,Courier,monospace;font-size:.9em;color:var(--color-code)}.btn-primary{display:inline-block;margin-top:1rem;padding:.5rem 1rem;background:var(--color-primary)!important;color:#fff!important;text-decoration:none;border:none!important;border-radius:4px;font-weight:500;cursor:pointer;transition:background .2s ease}.btn-primary:hover{background:var(--color-primary-active)!important}.btn-success{background:var(--color-fixed)!important;color:#fff!important}.btn-success:hover{background:var(--color-fixed-hover)!important}.btn-danger{background:var(--color-buggy)!important;color:#fff!important}.btn-danger:hover{background:var(--color-buggy-hover)!important}.btn-warning{background:#ffc107!important;color:#212529!important}.btn-warning:hover{background:#e0a800!important}button:focus-visible,.btn-primary:focus-visible,.btn-success:focus-visible,.btn-danger:focus-visible,.btn-warning:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}a:focus-visible,.back-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}.controls{background:var(--color-background);padding:1.5rem;border-radius:8px;margin-bottom:2rem}.hint{font-size:.9rem;color:var(--color-text-secondary);margin:0}.control-buttons{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1rem}button{padding:.5rem 1rem;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s ease}button:hover:not(:disabled){background:var(--color-background);border-color:var(--color-primary)}button:disabled{opacity:.5;cursor:not-allowed}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;align-items:start}@media(max-width:768px){.comparison{grid-template-columns:1fr}}.demo-card{border:2px solid var(--color-border);border-radius:8px;overflow:hidden}.demo-card.buggy{border-color:var(--color-buggy)}.demo-card.buggy .card-header{background:var(--color-buggy);color:#fff}.demo-card.fixed{border-color:var(--color-fixed)}.demo-card.fixed .card-header{background:var(--color-fixed);color:#fff}.card-header{padding:1rem}.card-header h3{margin:0 0 .25rem;color:#fff}.card-header p{margin:0;font-size:.9rem;opacity:.9}.card-body{padding:1.5rem}.loading{text-align:center;padding:2rem}.spinner{width:40px;height:40px;margin:0 auto 1rem;border:4px solid #f3f3f3;border-top:4px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.spinner-tiny{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite;margin-left:8px;vertical-align:middle}.loading-text{font-size:.75rem;font-weight:400;opacity:.8;margin-left:4px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.explanation h2{margin-bottom:1.5rem}.explanation-card{background:#f8f9fa;padding:1.5rem;border-radius:8px;margin-bottom:1.5rem}.explanation-card h3{margin-top:0;color:#333}.explanation-card ul{margin:.5rem 0;padding-left:1.5rem}.explanation-card ul li{margin:.5rem 0}.explanation-card pre{background:#fff;padding:1rem;border-radius:4px;overflow-x:auto;margin:.5rem 0 0}.explanation-card pre code{background:none;padding:0;color:#333}