*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f5f5f5}.app{max-width:1200px;margin:0 auto;padding:20px}h1{color:#333;border-bottom:2px solid #61dafb;padding-bottom:10px}h2{color:#444}.nav{background:#282c34;padding:15px 20px;margin-bottom:20px;border-radius:8px}.nav a{color:#61dafb;text-decoration:none;margin-right:20px;padding:8px 16px;border-radius:4px;transition:background .2s}.nav a:hover{background:#61dafb1a}.nav a.active{background:#61dafb;color:#282c34}.pattern-container{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.panel.before{border-top:4px solid #ff6b6b}.panel.after{border-top:4px solid #51cf66}.panel h3{margin-top:0;display:flex;align-items:center;gap:8px}.badge{font-size:12px;padding:2px 8px;border-radius:12px;font-weight:400}.badge.bad{background:#ffe3e3;color:#c92a2a}.badge.good{background:#d3f9d8;color:#2b8a3e}.render-count{background:#fff3bf;padding:8px 12px;border-radius:4px;font-size:14px;margin-bottom:15px}button{background:#61dafb;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;margin:5px;transition:background .2s}button:hover{background:#4db8d9}input,select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;margin:5px}.explanation{background:#e7f5ff;padding:15px;border-radius:4px;margin:20px 0;border-left:4px solid #339af0}.explanation h4{margin:0 0 10px;color:#1c7ed6}.explanation ul{margin:0;padding-left:20px}.log{background:#2d2d2d;color:#f8f8f2;padding:15px;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:12px;max-height:200px;overflow-y:auto}.log-entry{margin:4px 0}.log-entry.effect{color:#ff79c6}.log-entry.render{color:#50fa7b}.log-entry.state{color:#8be9fd}.product-card{border:1px solid #ddd;padding:15px;border-radius:8px;margin:10px 0}.price{font-size:24px;font-weight:700;color:#2b8a3e}.loading{color:#868e96;font-style:italic}.error{color:#c92a2a;background:#ffe3e3;padding:10px;border-radius:4px}.code-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.code-panel{min-width:0}@media(max-width:900px){.code-comparison{grid-template-columns:1fr}}