:root{--primary-color: #3498db;--secondary-color: #2ecc71;--accent-color: #e74c3c;--dark-color: #1F1F21;--light-color: #1F1F21;--layer7-color: #9b59b6;--layer6-color: #3498db;--layer5-color: #1abc9c;--layer4-color: #2ecc71;--layer3-color: #f1c40f;--layer2-color: #e67e22;--layer1-color: #e74c3c;--shadow: 0 4px 6px rgba(0, 0, 0, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:gray;background-color:var(--dark-color);overflow-x:hidden}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;line-height:1.2}h1{font-size:2.5rem;color:var(--dark-color)}h2{font-size:2rem;color:var(--dark-color);border-bottom:2px solid var(--dark-color);padding-bottom:.5rem;margin-bottom:1.5rem}h3{font-size:1.5rem;color:var(--dark-color)}p{margin-bottom:1rem}a{color:var(--dark-color);text-decoration:none;transition:var(--transition)}a:hover{color:var(--secondary-color);text-decoration:underline}ul,ol{margin-left:2rem;margin-bottom:1rem}header{background-color:var(--dark-color);color:#fff;text-align:center;padding:2rem 1rem}header h1{color:#fff;margin-bottom:.5rem}header h2{color:var(--light-color);font-size:1.2rem;border:none;margin-bottom:0}nav{background-color:var(--dark-color);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}nav ul{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto}nav li{flex:0 0 auto}nav a{display:block;color:#fff;text-align:center;padding:1rem;text-decoration:none;transition:var(--transition)}nav a:hover,nav a.active{background-color:#fff3}main{max-width:1200px;margin:0 auto;padding:2rem 1rem}section{margin-bottom:3rem;display:none}section.active-section{display:block}footer{background-color:var(--dark-color);color:#fff;text-align:center;padding:1rem;margin-top:2rem}.content-container{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:2rem}.text-content{flex:1 1 400px}.visual-content{flex:1 1 400px;display:flex;justify-content:center;align-items:center}.osi-stack{display:flex;flex-direction:column;width:300px;box-shadow:var(--shadow);border-radius:8px;overflow:hidden}.osi-layer{padding:1rem;text-align:center;font-weight:700;color:#fff;transition:var(--transition);cursor:pointer}.osi-layer:hover{transform:scale(1.05)}.osi-layer[data-layer="7"]{background-color:var(--layer7-color)}.osi-layer[data-layer="6"]{background-color:var(--layer6-color)}.osi-layer[data-layer="5"]{background-color:var(--layer5-color)}.osi-layer[data-layer="4"]{background-color:var(--layer4-color)}.osi-layer[data-layer="3"]{background-color:var(--layer3-color)}.osi-layer[data-layer="2"]{background-color:var(--layer2-color)}.osi-layer[data-layer="1"]{background-color:var(--layer1-color)}.toggle-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin:2rem 0}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:var(--transition)}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:var(--transition)}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.toggle-label{font-weight:700;color:#ccc;transition:var(--transition)}.toggle-label.active{color:var(--primary-color)}.section-intro{text-align:center;margin-bottom:2rem;font-size:1.2rem}.layers-container{display:flex;flex-direction:column;gap:1rem}.layer-box{border:1px solid #ddd;border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.layer-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;cursor:pointer;transition:var(--transition)}#layer7 .layer-header{background-color:var(--layer7-color);color:#fff}#layer6 .layer-header{background-color:var(--layer6-color);color:#fff}#layer5 .layer-header{background-color:var(--layer5-color);color:#fff}#layer4 .layer-header{background-color:var(--layer4-color);color:#fff}#layer3 .layer-header{background-color:var(--layer3-color);color:#fff}#layer2 .layer-header{background-color:var(--layer2-color);color:#fff}#layer1 .layer-header{background-color:var(--layer1-color);color:#fff}.layer-header h3{margin:0;color:inherit}.expand-icon{transition:var(--transition)}.layer-content{display:none;padding:1rem;display:flex;flex-wrap:wrap;gap:2rem}.layer-description{flex:1 1 400px}.layer-animation{flex:1 1 400px;min-height:200px;display:flex;justify-content:center;align-items:center}.animation-container{width:100%;height:200px;background-color:var(--dark-color);border-radius:8px;display:flex;justify-content:center;align-items:center}.example-container{background-color:var(--dark-color);border-radius:8px;padding:2rem;box-shadow:var(--shadow)}.email-journey{margin-top:2rem}.journey-controls{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.journey-visualization{display:flex;gap:2rem;margin-bottom:2rem}.journey-layers{display:flex;flex-direction:column;width:150px}.journey-layer{padding:.5rem;text-align:center;font-weight:700;color:#fff;transition:var(--transition)}.journey-layer[data-layer="7"]{background-color:var(--layer7-color)}.journey-layer[data-layer="6"]{background-color:var(--layer6-color)}.journey-layer[data-layer="5"]{background-color:var(--layer5-color)}.journey-layer[data-layer="4"]{background-color:var(--layer4-color)}.journey-layer[data-layer="3"]{background-color:var(--layer3-color)}.journey-layer[data-layer="2"]{background-color:var(--layer2-color)}.journey-layer[data-layer="1"]{background-color:var(--layer1-color)}.journey-animation{flex:1;height:350px;background-color:#f9f9f9;border-radius:8px;display:flex;justify-content:center;align-items:center}.journey-step{display:none;background-color:#f9f9f9;padding:1rem;border-radius:8px}.journey-step.active{display:block}.scenarios-container{display:flex;flex-direction:column;gap:2rem}.scenario{background-color:var(--dark-color);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.scenario h3{padding:1rem;background-color:var(--primary-color);color:#fff;margin:0}.scenario-content{padding:1rem;display:flex;flex-wrap:wrap;gap:2rem}.scenario-description{flex:1 1 400px}.scenario-animation{flex:1 1 400px;min-height:200px;display:flex;justify-content:center;align-items:center}.problem-details{margin-top:1rem;padding:1rem;background-color:#f9f9f9;border-radius:8px}.game-container{background-color:var(--dark-color);border-radius:8px;padding:2rem;box-shadow:var(--shadow)}.game-intro{text-align:center;margin-bottom:2rem}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.badges{display:flex;gap:.5rem;margin-top:.5rem}.badge{width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:.8rem}.case-container{background-color:#f9f9f9;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.case-description{margin-bottom:1.5rem}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.layer-option{padding:.75rem;border:none;border-radius:4px;background-color:var(--dark-color);cursor:pointer;transition:var(--transition)}.layer-option:hover{background-color:var(--primary-color);color:#fff}.feedback-container{background-color:#f9f9f9;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.correct-feedback{color:var(--secondary-color);font-weight:700}.incorrect-feedback{color:var(--accent-color);font-weight:700}.game-controls{display:flex;justify-content:center}.game-results{text-align:center}.earned-badges{margin:2rem 0}#final-badges-container{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.quiz-container{background-color:var(--dark-color);border-radius:8px;padding:2rem;box-shadow:var(--shadow)}.quiz-intro{text-align:center;margin-bottom:2rem}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.question-container{background-color:var(--dark-color);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.question{font-size:1.2rem;margin-bottom:1.5rem}.answer-options{display:flex;flex-direction:column;gap:1rem}.answer-option{padding:1rem;border:1px solid #ddd;border-radius:4px;background-color:var(--dark-color);cursor:pointer;transition:var(--transition)}.answer-option:hover{background-color:#f0f0f0}.quiz-feedback{background-color:var(--dark-color);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.quiz-controls{display:flex;justify-content:center}.quiz-results{text-align:center}.quiz-feedback-summary{margin:2rem 0;text-align:left}button{padding:.75rem 1.5rem;border:none;border-radius:4px;background-color:var(--primary-color);color:#fff;font-weight:700;cursor:pointer;transition:var(--transition)}button:hover{background-color:var(--secondary-color)}button:disabled{background-color:#ccc;cursor:not-allowed}@media(max-width:768px){h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.2rem}nav ul{flex-wrap:nowrap}nav a{padding:.75rem;font-size:.9rem}.content-container,.layer-content,.scenario-content{flex-direction:column}.visual-content,.layer-animation,.scenario-animation{order:-1}.journey-visualization{flex-direction:column}.journey-layers{width:100%;flex-direction:row;overflow-x:auto}.journey-layer{flex:1;min-width:100px}.options-grid{grid-template-columns:1fr}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/OSInstyles.css.map */