.calculator-container {background: #fff;padding: 20px;border-radius: 12px;box-shadow: 0 0 8px rgba(0,0,0,.1);max-width: 400px;margin: 0 auto;font-family: Arial,sans-serif;}
.fraction-inputs {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;}
.mixed-number {display: flex;align-items: center;gap: 6px;}
.fraction {display: flex;flex-direction: column;align-items: center;position: relative;}
.fraction input {width: 50px;text-align: center;padding: 6px;font-size: 16px;}
.line {width: 100%;border: none;border-top: 2px solid black;margin: 2px 0;}
.operation-container {display: flex;justify-content: center;align-items: center;margin: 10px 0;}
select.operation {width: 60px;height: 40px;font-size: 20px;text-align: center;border: 2px solid #ccc;border-radius: 6px;background-color: #fff;cursor: pointer;appearance: none;-webkit-appearance: none;-moz-appearance: none;transition: border-color .3s,box-shadow .3s;}
select.operation:focus {outline: none;border-color: #4caf50;box-shadow: 0 0 4px #4caf50;}
.buttons {display: flex;justify-content: center;gap: 15px;margin-bottom: 20px;}
.calculate-btn {background-color: #4caf50;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;border-radius: 8px;}
.calculate-btn:hover {background-color: #449d48;}
.clear-btn {background-color: #a6acaf;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;border-radius: 8px;}
.clear-btn:hover {background-color: #91989b;}
.result-section {text-align: center;}
.result-chart {font-size: 24px;font-weight: bold;color: #4caf50;margin: 10px 0;}
.steps {font-size: 14px;color: #333;margin-top: 10px;white-space: pre-wrap;}
input[type="number"] {width: 50px;height: 40px;font-size: 20px;text-align: center;border: 2px solid #ccc;border-radius: 6px;background-color: #fff;box-sizing: border-box;margin: 3px;transition: border-color .3s,box-shadow .3s;}
input[type="number"]:focus {outline: none;border-color: #4caf50;box-shadow: 0 0 5px #4caf50;}
input[type="number"]::placeholder {color: #aaa;font-size: 16px;}
.mixed-number-group {display: flex;align-items: center;justify-content: center;gap: 5px;}
.fraction-input {display: flex;flex-direction: column;align-items: center;}
.fraction-input {display: flex;flex-direction: column;align-items: center;}
.fraction-bar {width: 100%;height: 2px;background-color: black;margin: 2px 0;}
.mixed-number {display: flex;align-items: center;gap: 5px;}
.mixed-number {display: flex;align-items: center;gap: 8px;margin-bottom: 15px;}
input.whole {width: 50px;height: 50px;font-size: 20px;text-align: center;border: 2px solid #ccc;border-radius: 8px;background-color: #fff;box-sizing: border-box;appearance: textfield;}
input.whole::-webkit-outer-spin-button, input.whole::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}