body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f9f9f9;color:#333}.use-state-container{max-width:900px;margin:40px auto;padding:0 20px}.use-state-container h2{text-align:center;font-size:2.5rem;margin-bottom:40px;color:#222}.section-card{background-color:#fff;border-radius:12px;box-shadow:0 2px 12px #00000012;padding:24px;margin-bottom:32px}.section-card h3{font-size:1.5rem;margin-bottom:16px;color:#444}.section-card input[type=text],.section-card input[type=number]{width:100%;padding:10px 14px;margin-bottom:12px;border:1px solid #ccc;border-radius:6px;font-size:1rem;box-sizing:border-box}.section-card button{padding:10px 18px;margin-right:10px;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s ease}.section-card button:hover{opacity:.9}.btn-blue{background-color:#3b82f6;color:#fff}.btn-red{background-color:#ef4444;color:#fff}.btn-green{background-color:#10b981;color:#fff}.btn-indigo{background-color:#6366f1;color:#fff}.todo-list{list-style-type:disc;padding-left:20px;margin-top:16px}.todo-item{display:flex;justify-content:space-between;align-items:center;background-color:#f3f4f6;padding:10px 12px;border-radius:6px;margin-bottom:8px}.remove-btn{background:none;border:none;color:#ef4444;font-size:.9rem;cursor:pointer}.remove-btn:hover{text-decoration:underline}.use-state-demo{max-width:800px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}.use-state-demo h2{color:#2c3e50;text-align:center;margin-bottom:30px;font-size:2.5rem;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.1);position:relative;padding-bottom:10px}.use-state-demo h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:3px;background:linear-gradient(90deg,#4caf50,#45a049);border-radius:2px}.use-state-demo h3{color:#34495e;margin-bottom:20px;font-size:1.5rem;position:relative;padding-left:15px}.use-state-demo h3:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:20px;background:#4caf50;border-radius:2px}.counter-section,.text-section,.object-section,.array-section{background-color:#ffffffe6;padding:25px;margin-bottom:30px;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.counter-section:hover,.text-section:hover,.object-section:hover,.array-section:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.counter-section:before,.text-section:before,.object-section:before,.array-section:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#4caf50,#45a049);opacity:0;transition:opacity .3s ease}.counter-section:hover:before,.text-section:hover:before,.object-section:hover:before,.array-section:hover:before{opacity:1}button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;margin-right:10px;margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;position:relative;overflow:hidden}button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);transition:transform .3s ease}button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}button:hover:after{transform:translateY(-100%)}button:active{transform:translateY(1px)}input{padding:12px;margin-bottom:15px;border:2px solid #e0e0e0;border-radius:6px;width:100%;max-width:300px;font-size:1rem;transition:all .3s ease;background-color:#ffffffe6}input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 3px #4caf5033}input::placeholder{color:#999}ul{list-style-type:none;padding:0;margin:0}li{background-color:#fff;padding:15px;margin-bottom:8px;border-radius:6px;box-shadow:0 2px 4px #0000001a;transition:all .3s ease;display:flex;align-items:center;position:relative;overflow:hidden}li:before{content:"•";color:#4caf50;font-size:1.5rem;margin-right:10px}li:hover{transform:translate(5px);box-shadow:0 4px 8px #00000026}.counter-section p{font-size:2rem;font-weight:700;color:#2c3e50;text-align:center;margin:20px 0;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.text-section p{color:#34495e;font-size:1.1rem;margin-top:10px;padding:10px;background-color:#4caf501a;border-radius:4px}.object-section p{color:#34495e;margin:10px 15px 10px 0;padding:8px;background-color:#4caf501a;border-radius:4px;display:inline-block}@media (max-width: 768px){.use-state-demo{padding:15px}.use-state-demo h2{font-size:2rem}.counter-section,.text-section,.object-section,.array-section{padding:20px}button{width:100%;margin-right:0;margin-bottom:10px}}