.app-container{font-family:Arial,sans-serif;max-width:1000px;margin:2rem auto;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;margin-top:0}.header{background-color:#f8f9fa;padding:10px;position:sticky;top:0;z-index:1000;box-shadow:0 2px 4px #0000001a}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.toolbar button{padding:.5rem 1rem;border:none;border-radius:5px;cursor:pointer;background-color:#4caf50;color:#fff;font-size:1rem}.toolbar button:hover{background-color:#45a049}.notebook{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;margin-top:1rem;min-height:400px}.cell{border:1px solid #ddd;border-radius:8px;padding:1rem;background:#f9f9f9;margin-bottom:1rem;min-height:50px}.output-cell{margin-top:.5rem;border-top:1px solid #ccc;padding-top:.5rem;background:#eaeaea;border-radius:5px;word-wrap:break-word}.run-button{align-self:flex-end;background-color:#4caf50;color:#fff;border:none;border-radius:5px;padding:.6rem 1.2rem;cursor:pointer;margin-bottom:.5rem;font-size:1rem}.run-button:hover{background-color:#45a049}.cell-toolbar{display:flex;justify-content:flex-end}.cell-number{font-weight:700;margin-bottom:.5rem}.monaco-editor{overflow:auto}.output img{max-width:100%;height:auto}.csv-data table,.output-cell table,.output table{border-collapse:collapse;width:100%;margin-top:1em;overflow-x:auto;display:block}.csv-data th,.output-cell th,.output th,.csv-data td,.output-cell td,.output td{border:1px solid #ddd;padding:.5rem;text-align:left}.csv-data tr:nth-child(2n),.output-cell tr:nth-child(2n),.output tr:nth-child(2n){background-color:#f2f2f2}.csv-data th,.output-cell th,.output th{padding-top:.75rem;padding-bottom:.75rem;background-color:#4caf50;color:#fff}@media (max-width: 768px){.app-container{padding:1rem;margin:1rem}.toolbar{flex-direction:column;align-items:stretch}.toolbar button,.run-button{width:100%}}@media (max-width: 480px){.cell{padding:.75rem}.output-cell{font-sze:.9rem}.toolbar{gap:.5rem}}.app-container-responsive{display:flex;height:98vh}.left-container-responsive{width:45%;background-color:#f0f0f0;padding:10px;height:100%}.main-container-responsive{width:55%;padding:20px;overflow-y:auto;height:100%}@media (max-width: 768px){.app-container-responsive{flex-direction:column}.left-container-responsive,.main-container-responsive{width:100%;height:auto}}.code-block-display{max-height:200px;overflow-y:auto;border:1px solid #ccc;background-color:#f5f5f5;padding:10px;border-radius:5px}.container{max-width:100%;padding:1rem;box-sizing:border-box}.exerciseBox{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:.5rem;margin:0 auto auto;max-width:900px;width:100%}.header .title{font-size:1.8rem;margin-bottom:1rem;text-align:center}.description{font-size:1rem;margin-bottom:1.5rem;text-align:justify}.step{margin-bottom:1.5rem}.stepTitle{font-weight:700;margin-bottom:.5rem}.codeBlock{background-color:#f4f4f4;border-left:4px solid #007acc;padding:1rem;overflow-x:auto;font-family:Courier New,Courier,monospace;font-size:.95rem}.copyContainer{text-align:center;margin-top:2rem}.copyButton{background-color:#007acc;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:4px;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}.copyButton:hover{background-color:#005fa3}@media screen and (max-width: 768px){.exerciseBox{padding:1.2rem}.header .title{font-size:1.4rem}.description,.stepTitle,.codeBlock{font-size:.95rem}.copyButton{font-size:.9rem}}@media screen and (max-width: 480px){.exerciseBox{padding:1rem}.header .title{font-size:.6rem}.description,.stepTitle,.codeBlock{font-size:.8rem}.copyButton{font-size:.85rem;padding:.4rem .8rem}}.container{display:flex;justify-content:center;align-items:center;padding:15px;min-height:100vh;background-color:#f4f7fa}.exercise-box{width:95%;max-width:550px;background-color:#fff;border-radius:10px;box-shadow:0 4px 16px #0000001a;padding:15px;font-family:Roboto,sans-serif}.header{border-bottom:1px solid #e0e0e0;padding-bottom:10px;margin-bottom:15px}.title{font-size:20px;color:#333;font-weight:600;margin:0}.description{font-size:14px;color:#555;margin-bottom:12px;line-height:1.5}.highlight{color:#d32f2f;font-weight:700;background-color:#fff3e0;padding:2px 5px;border-radius:4px}.content{font-size:14px;color:#555}.code-step{margin-bottom:20px}.step-title{font-size:16px;font-weight:600;color:#007bff;margin-bottom:6px}.code-block{background-color:#f7f7f7;padding:10px;border-radius:6px;font-size:13px;margin-bottom:15px;overflow-x:auto;white-space:pre-wrap;border-left:3px solid #007bff}.copy-container{text-align:center;margin-top:15px}.copy-button{padding:10px 15px;background-color:#007bff;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.copy-button:hover{background-color:#0056b3}@media (max-width: 1024px){.exercise-box{padding:10px}.title,.step-title{font-size:15px}.description,.content,.code-block{font-size:13px}.copy-button{font-size:13px;padding:8px 12px}}.container{display:flex;flex-direction:row;padding:20px;gap:20px;height:100%;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.buttonContainer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:25%;height:100%}.button,.activeButton,.disabledButton{width:100%;text-align:left;font-size:1.1rem;padding:12px 16px;margin-bottom:12px;border-radius:6px;border:none;transition:background-color .3s ease;box-shadow:0 2px 8px #0000001a}.button{background-color:#4a90e2;color:#fff;cursor:pointer}.button:hover{background-color:#357ab8}.activeButton{background-color:#2c3e50;color:#fff;font-size:1rem;padding:10px 14px}.disabledButton{background-color:#d3d3d3;color:#777;cursor:not-allowed}.contentContainer{flex:1;background-color:#f9f9f9;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:20px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;height:100%}.intro{padding:20px;background-color:#eaf7ff;border-radius:10px;box-shadow:0 2px 10px #0000001a;color:#333;font-size:1rem;text-align:center;margin-bottom:20px}.datasetButton{background-color:#7f8c8d;color:#fff;padding:10px 14px;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background-color .3s ease;box-shadow:0 2px 6px #0000001a;margin-bottom:20px}.datasetButton:hover{background-color:#636e72}.datasetDetails{padding:20px;border-radius:10px;background-color:#f1f1f1;box-shadow:0 2px 10px #0000001a;width:100%;font-size:1rem;color:#333}.responsiveText{font-size:1rem;margin-top:10px;color:#333;text-align:left}ul{list-style-type:disc;padding-left:20px}li{margin-bottom:10px}@media screen and (max-width: 1024px){.container{flex-direction:column;height:auto}.buttonContainer{flex-direction:row;flex-wrap:wrap;width:100%;justify-content:center}.button,.activeButton,.disabledButton{width:45%;margin:5px;font-size:.95rem;padding:10px}.contentContainer{width:100%;margin-top:20px;height:auto;padding:15px}}@media screen and (max-width: 600px){.button,.activeButton,.disabledButton{width:100%;font-size:.9rem;padding:10px 12px}.intro,.datasetDetails{padding:15px;font-size:.95rem}.datasetButton{width:100%;font-size:.95rem}.contentContainer{padding:12px}}.menu-toggle-button{display:none;background-color:#4a90e2;color:#fff;padding:10px 15px;border:none;border-radius:6px;font-size:1.1rem;cursor:pointer;z-index:1001}.menu-toggle-button:hover{background-color:#357ab8}.hamburger-icon{display:inline-block;width:20px;height:3px;background-color:#fff;position:relative;vertical-align:middle}.hamburger-icon:before,.hamburger-icon:after{content:"";display:block;width:20px;height:3px;background-color:#fff;position:absolute;left:0}.hamburger-icon:before{top:-7px}.hamburger-icon:after{top:7px}.menu-text{margin-left:10px;vertical-align:middle}.menu-wrapper{display:contents}@media screen and (max-width: 1024px){.menu-toggle-button{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;z-index:1000}.buttonContainer{display:none;flex-direction:column;width:100%;padding:10px;align-items:flex-start}.menu-wrapper.open{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;z-index:1002;flex-direction:column;align-items:center;justify-content:center}.menu-wrapper.open .buttonContainer{display:flex;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0003;width:80%;max-width:400px;padding:20px}.menu-wrapper.open .buttonContainer button{width:100%;margin-bottom:10px}.menu-wrapper.open .buttonContainer button:last-child{margin-bottom:0}.container{padding-top:60px}}