.matrix-calculator{width:100%;max-width:900px;margin:2rem auto}.operation-selector{margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}.operation-selector label{font-weight:600;color:#333;font-size:1.1rem}.operation-select{flex:1 1;padding:.875rem;font-size:1rem;border:2px solid #e0e0e0;border-radius:12px;background:white;cursor:pointer;transition:all .3s ease;font-weight:500}.operation-select:hover{border-color:#ff6b6b}.operation-select:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.1)}.matrices-container{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin:2rem 0;flex-wrap:wrap}.matrix-input-container{background:linear-gradient(135deg,#fafafa,#f5f5f5);border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.05);min-width:250px}.matrix-input-container h4{margin:0 0 1rem;color:#333;font-size:1.2rem;text-align:center;font-weight:600}.matrix-size-controls{display:flex;gap:1rem;margin-bottom:1rem;justify-content:center}.matrix-size-controls label{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.9rem;color:#666;font-weight:500}.matrix-size-controls input[type=number]{width:60px;padding:.5rem;text-align:center;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;font-weight:600;transition:all .3s ease}.matrix-size-controls input[type=number]:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.1)}.matrix-grid{display:grid;grid-gap:.5rem;gap:.5rem;max-width:100%}.matrix-cell{width:100%;aspect-ratio:1;padding:.5rem;text-align:center;border:2px solid #e0e0e0;border-radius:8px;background:white;font-size:1rem;font-weight:500;transition:all .3s ease;min-width:50px}.matrix-cell:focus{outline:none;box-shadow:0 0 0 3px rgba(255,107,107,.1)}.matrix-cell:focus,.matrix-cell:hover{border-color:#ff6b6b}.operation-symbol{font-size:2.5rem;font-weight:700;color:#ff6b6b;display:flex;align-items:center;justify-content:center;padding:0 1rem}.scalar-input-container{display:flex;flex-direction:column;align-items:center;gap:.75rem;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);padding:1.5rem;border-radius:16px;border:2px solid #3b82f6}.scalar-input-container label{font-weight:600;color:#1e40af;font-size:1.1rem}.scalar-input{width:120px;padding:.875rem;text-align:center;border:2px solid #3b82f6;border-radius:12px;font-size:1.3rem;font-weight:700;color:#1e40af;background:white;transition:all .3s ease}.scalar-input:focus{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.2)}.result-section{background:linear-gradient(135deg,#fff5f5,#ffe5e5);border:2px solid #ff6b6b;border-radius:16px;padding:2rem;margin:2rem 0}.result-title{text-align:center;color:#333;font-size:1.2rem;margin-bottom:1.5rem;font-weight:600}.result-matrix{background:white;border:2px solid #ff6b6b;border-radius:12px;padding:1rem;max-width:-moz-fit-content;max-width:fit-content;margin:0 auto}.matrix-cell-result{padding:.75rem;text-align:center;background:linear-gradient(135deg,#ffffff,#fef2f2);border:1px solid #fecaca;border-radius:8px;font-size:1.1rem;font-weight:600;color:#991b1b;min-width:60px}.determinant-result{display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem}.determinant-label{font-size:1.5rem;font-weight:600;color:#333}.determinant-value{font-size:2.5rem;font-weight:700;color:#ff6b6b;background:white;padding:1rem 2rem;border-radius:12px;border:2px solid #ff6b6b;box-shadow:0 4px 8px rgba(255,107,107,.2)}.steps-section{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:16px;padding:1.5rem;margin:2rem 0;border:2px solid #22c55e}.steps-title{font-size:1.2rem;color:#166534;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.steps-icon{font-size:1.5rem}.steps-list{display:flex;flex-direction:column;gap:1rem}.step-item{display:flex;align-items:flex-start;gap:1rem;background:white;padding:1rem;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.05)}.step-number{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#22c55e;color:white;border-radius:50%;font-weight:700;font-size:.9rem;flex-shrink:0}.step-content{flex:1 1}.step-description{color:#333;line-height:1.6;font-size:.95rem;margin-bottom:.75rem}.step-matrix{margin-top:1rem}.step-matrix .result-matrix{background:#f0fdf4;border-color:#22c55e;padding:.75rem}.step-matrix .matrix-cell-result{background:white;border-color:#bbf7d0;color:#166534;font-size:1rem;padding:.5rem}.examples-section{margin:2rem 0}.examples-title{font-size:1.2rem;color:#333;margin-bottom:1rem;font-weight:600;text-align:center}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:1rem;gap:1rem}.example-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border:2px solid #e0e0e0;border-radius:12px;background:white;cursor:pointer;transition:all .3s ease;text-align:center}.example-button:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.2)}.example-icon{font-size:2rem}.example-label{font-weight:600;color:#333;font-size:.9rem}.hints-section{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid #f59e0b;padding:1.5rem;border-radius:8px;margin:2rem 0}.hints-title{font-size:1.2rem;color:#92400e;margin-bottom:1rem;font-weight:600}.hints-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.hints-list li{padding-left:1.5rem;position:relative;color:#78350f;line-height:1.6;font-size:.9rem}.hints-list li:before{content:"✓";position:absolute;left:0;color:#f59e0b;font-weight:700}@media (max-width:767px){.matrix-calculator{margin:1rem auto}.operation-selector{flex-direction:column;align-items:stretch}.matrices-container{flex-direction:column;gap:1rem}.matrix-input-container{min-width:100%}.operation-symbol{transform:rotate(90deg);font-size:2rem;padding:.5rem 0}.matrix-grid{gap:.375rem}.matrix-cell{min-width:40px;font-size:.9rem;padding:.375rem}.matrix-cell-result{min-width:50px;font-size:1rem;padding:.625rem}.determinant-result{flex-direction:column;gap:.75rem;padding:1.5rem}.determinant-value{font-size:2rem}.examples-grid{grid-template-columns:repeat(2,1fr)}.step-item{flex-direction:column;align-items:center;text-align:center}}@media (max-width:375px){.matrix-cell{min-width:35px;font-size:.85rem}.matrix-size-controls input[type=number]{width:50px}.scalar-input{width:100px;font-size:1.1rem}.determinant-value{font-size:1.75rem;padding:.75rem 1.5rem}.examples-grid{grid-template-columns:1fr}}