body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #0b0b0b;
    color: #f3e6c8;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

h1 {
    color: #d9a441;
    font-size: 34px;
}

form {
    margin: 25px 0;
}

input, button {
    padding: 10px;
    font-size: 16px;
}

button {
    cursor: pointer;
}

.machine {
    position: relative;
    height: 520px;
    border: 2px solid #6d5630;
    border-radius: 18px;
    background: radial-gradient(circle, #272318, #050505);
    overflow: hidden;
}

.shaft {
    position: absolute;
    height: 8px;
    background: linear-gradient(90deg, #8a6a2e, #d9a441, #8a6a2e);
    border-radius: 999px;
    box-shadow: 0 0 15px rgba(217, 164, 65, .35);
    transform-origin: left center;
    z-index: 1;
}

.shaft-1 {
    width: 190px;
    left: 190px;
    top: 255px;
    transform: rotate(-25deg);
}

.shaft-2 {
    width: 170px;
    left: 390px;
    top: 225px;
    transform: rotate(38deg);
}

.shaft-3 {
    width: 160px;
    left: 540px;
    top: 300px;
    transform: rotate(-35deg);
}

.shaft-4 {
    width: 150px;
    left: 700px;
    top: 220px;
    transform: rotate(-25deg);
}

.shaft-5 {
    width: 150px;
    left: 735px;
    top: 300px;
    transform: rotate(35deg);
}

.shaft-6 {
    width: 130px;
    left: 860px;
    top: 265px;
    transform: rotate(-12deg);
}

.gear {
    position: absolute;
    border-radius: 50%;
    border: 8px dashed #c99b3b;
    background: #3a2d1b;
    color: #fff3d1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(var(--rot));
    box-shadow: 0 0 25px rgba(0,0,0,.7);
    font-weight: bold;
    z-index: 2;
}

.gear::before {
    content: "";
    position: absolute;
    width: 46%;
    height: 5px;
    background: #ff4d3d;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255,77,61,.9);
}

.gear::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background: #fff3d1;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gear-fecha {
    width: 170px;
    height: 170px;
    left: 55px;
    top: 175px;
    border-color: #d9a441;
}

.gear-sol {
    width: 130px;
    height: 130px;
    left: 275px;
    top: 110px;
    border-color: #e0b84d;
}

.gear-luna {
    width: 120px;
    height: 120px;
    left: 430px;
    top: 270px;
    border-color: #cfd6e6;
}

.gear-fase {
    width: 90px;
    height: 90px;
    left: 610px;
    top: 155px;
    border-color: #9fb0d0;
}

.gear-metonico {
    width: 115px;
    height: 115px;
    left: 735px;
    top: 75px;
    border-color: #7fd1a8;
}

.gear-saros {
    width: 120px;
    height: 120px;
    left: 720px;
    top: 300px;
    border-color: #d17f7f;
}

.gear-exeligmos {
    width: 95px;
    height: 95px;
    left: 900px;
    top: 200px;
    border-color: #c77fd1;
}

.data {
    margin-top: 25px;
    padding: 20px;
    background: #161616;
    border-radius: 12px;
}

hr {
    border: 0;
    border-top: 1px solid #c9b27a;
    margin: 25px 0;
}