* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #302f2f;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;  
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    overflow: hidden;
    padding: 20px;
}

.back-button {
    background: linear-gradient(45deg,#3498db,#2980b9);
    color:white; padding:12px 25px; border-radius:25px;
    text-decoration:none; margin-bottom:30px; display:inline-block;
}

.header {
    padding: 0px;
    text-align: center;
    color: rgb(67,64,64);
}

.header h1 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(29,16,44,0.3);
}

.header p {
    font-size: 1.2em;
    opacity: 0.9;
}

.content { padding: 40px; }

.section {
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(251,251,251,0.972);
    border-radius: 15px;
    border-left: 5px solid #4105d7;
    transition: transform 0.3s ease;
}

.section:hover { transform: translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.1); }

.section h2 { 
    color:#2c3e50;
    margin-bottom: 20px;
    font-size:2em;
    display:flex;
    align-items:center;
    gap:10px;
}

.icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg,#210101 0%,#fdfdfd 100%);
    border-radius: 50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:bold;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 20px;
    margin: 20px 0;
}

.example-card {
    background: linear-gradient(135deg,#f6f6f6 0%,#ffffff 100%);
    padding: 20px;
    border-radius: 10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.example-card h4 { color:#2c3e50; margin-bottom:10px; }
.example-card p { margin:5px 0; font-size:1.1em; }

.key-points {
    background: linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);
    padding:30px;
    border-radius:15px;
    margin:20px 0;
}

.key-points ul { list-style-type:none; padding:0; }
.key-points li { margin:15px 0; padding:15px; background:rgba(255,255,255,0.5); border-radius:8px; border-left:4px solid #ff6b6b; font-weight:500; }

.activity {
    background: linear-gradient(135deg,#d299c2 0%,#fef9d7 100%);
    padding:30px;
    border-radius:15px;
    margin:20px 0;
}

.question {
    background: rgba(255,255,255,0.7);
    padding:15px;
    margin:15px 0;
    border-radius:8px;
    border-left:4px solid #9b59b6;
}

.input-field {
    width:100%;
    padding:10px;
    margin:10px 0;
    border:2px solid #ddd;
    border-radius:5px;
    font-size:1em;
}

.check-btn {
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:25px;
    cursor:pointer;
    font-size:1em;
    transition: transform 0.2s ease;
}

.check-btn:hover { transform: scale(1.05); }

.result {
    margin:10px 0;
    padding:10px;
    border-radius:5px;
    font-weight:bold;
}

.correct { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.incorrect { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }