*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,Segoe UI,Roboto,sans-serif;background:#f8f9fa;color:#333;line-height:1.6;padding-bottom:3rem}.app{display:flex;gap:2rem}.main{flex:1;padding:2rem}@media (max-width: 767px){.main{padding:1rem}}.sidebar{width:320px;padding:1.5rem;background-color:#fff;border-radius:16px;box-shadow:0 4px 20px #0000000f;display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem;height:calc(100vh - 2rem);overflow-y:auto;transition:transform .3s ease,box-shadow .3s ease}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.close-btn{display:none;background:#ffe5e9;border:none;font-size:1.4rem;cursor:pointer;color:#dd0031;padding:.3rem .6rem;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:#ffccd8}.sidebar-title{font-size:1.5rem;font-weight:700;color:#dd0031}.sidebar-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.sidebar-link{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:12px;color:#333;text-decoration:none;font-weight:500;font-size:.95rem;transition:all .25s ease}.sidebar-link:hover{background:#ffe5e9;color:#dd0031;transform:translate(3px)}.sidebar-link .icon{font-size:1.2rem;color:#dd0031;transition:transform .3s ease,color .3s ease}.sidebar-link:hover .icon{transform:scale(1.2)}.overlay{position:fixed;inset:0;background:#00000026;z-index:999;display:none}.sidebar.open~.overlay{display:block}.container{padding:2rem;max-width:1500px;margin:0 auto}.title{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:#dd0031}.subtitle{font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:#444}.card{border-radius:16px;padding:1.5rem;margin-bottom:2rem;background:#fff;box-shadow:0 4px 15px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-3px);box-shadow:0 10px 20px #0000001a}.card-info{border-left:6px solid #dd0031;background:#fff0f2;color:#333}.card-neutral{border-left:6px solid #888888;background:#f8f9fa;color:#333}.code-block{padding:12px;border-radius:10px;font-family:Fira Code,monospace;white-space:pre-wrap;margin-top:1rem;font-size:.95rem;overflow-x:auto;border:1px solid #e0e0e0;background:#fdfdfd;color:#b71c1c}.code-block{padding:12px;border-radius:10px;font-family:Fira Code,monospace;white-space:pre-wrap;margin-top:1rem;font-size:.95rem;overflow-x:auto;border:1px solid #e0e0e0;background:#fff0f2;color:#b71c1c}@media (max-width: 992px){.app{flex-direction:column}.sidebar{width:100%;height:auto;position:relative;top:0}}@media (max-width: 768px){.container{padding:1rem}.title{font-size:1.8rem}.subtitle{font-size:1.1rem}}.hamburger-btn{display:none;position:fixed;top:1rem;left:1rem;z-index:1000;background:#dd0031;border:none;padding:.6rem;border-radius:8px;box-shadow:0 2px 6px #0003;cursor:pointer;color:#fff;transition:background .3s ease}.hamburger-btn:hover{background:#b71c1c}@media only screen and (max-width: 991px){.hamburger-btn{display:block}.sidebar-header .close-btn{display:inline-block}.sidebar{position:fixed;top:0;left:0;height:100vh;transform:translate(-100%);z-index:1000}.sidebar.open{transform:translate(0)}}.sidebar-link .material-icons{margin-right:.5rem;color:#dd0031}.intro-container{display:flex;flex-direction:column;gap:1.5rem}.logo-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.logo-header h1{margin:0}.angular-logo{width:60px;height:60px}.intro-container .card{transition:transform .3s ease,box-shadow .3s ease}.intro-container .card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001f}